需用min-height/max-height+overflow-y: auto+resize: vertical，并通过JS监听input事件动态设置height为scrollHeight（先设auto再读取）；placeholder失效常因value为空、line-height过小或Safari兼容问题；移动端需避免fixed定位并监听focus调用scrollIntoView；限制字数应使用Array.from(value).length而非value.length。
怎么让 <textarea></textarea> 支持换行和自动高度？
默认的 <textarea></textarea> 不会自动撑高，用户敲回车后内容被截断或出现滚动条，体验像在用老式终端。这不是 bug，是浏览器默认行为——它只按 rows 属性固定行数，不响应内容长度变化。
- 别依赖
rows或height写死值，改用min-height+max-height配合overflow-y: auto - 必须加
resize: vertical（或none），否则右下角拖拽手柄会干扰布局 - 想“自动高度”，得靠 JS 监听
input事件，动态设scrollHeight到style.height；注意要重置height为auto再读scrollHeight，否则会误判
textarea {
min-height: 80px;
max-height: 240px;
width: 100%;
resize: vertical;
overflow-y: auto;
}
placeholder 不显示？常见原因和修复
placeholder 在 <textarea></textarea> 里表现比 <input> 更脆弱，尤其遇到 CSS 重置、字体缩放或空格占位时容易消失。
- 检查是否写了
value=""或textContent = ""—— 即使为空字符串，也会覆盖placeholder - 避免给
textarea设line-height过小（如1），会导致 placeholder 垂直居中失效 - 某些旧版 Safari 对
placeholder的color继承异常，建议显式写::placeholder { color: #999; }
移动端软键盘顶起 <textarea></textarea> 后定位错乱
iOS 和部分安卓机型在唤出软键盘时，页面视口压缩但未触发 resize 事件，导致 textarea 被顶到屏幕外，或者光标位置和实际输入框错位。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不要用
position: fixed包裹textarea，移动端 fixed 定位在软键盘弹出时极易失灵 - 监听
focus事件，在里面调用element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - 若页面有
viewport缩放（比如user-scalable=yes），关掉它：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
怎么限制输入长度又不影响中文/emoji？
用 maxlength 属性看似简单，但在 UTF-16 编码下，一个 emoji（如 ?）占 2 个码元，maxlength="10" 实际可能只容下 5 个 emoji；中文一般没问题，但生僻字或组合字符也可能超限。
立即学习“前端免费学习笔记（深入）”；
- 服务端永远要做二次校验，前端
maxlength只是体验层辅助 - 真要精确控制字符数（非字节数），JS 里用
Array.from(value).length计算，比value.length准确 - 显示剩余字数时，实时用上述方法计算，别直接减
maxlength - value.length
有些边界情况得动手试：比如 iOS 上 input 事件对粘贴的响应延迟、Android 输入法自带预测文本导致的光标跳动、还有 textarea 在 flex 容器里不收缩的问题——这些没法靠文档猜出来，得打开真机调试器看 computed style 和事件流。
