需用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。

怎么让 支持换行和自动高度？

默认的 不会自动撑高，用户敲回车后内容被截断或出现滚动条，体验像在用老式终端。这不是 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 在 里表现比 更脆弱，尤其遇到 CSS 重置、字体缩放或空格占位时容易消失。

• 检查是否写了 value="" 或 textContent = "" —— 即使为空字符串，也会覆盖 placeholder
• 避免给 textarea 设 line-height 过小（如 1），会导致 placeholder 垂直居中失效
• 某些旧版 Safari 对 placeholder 的 color 继承异常，建议显式写 ::placeholder { color: #999; }

移动端软键盘顶起 后定位错乱

iOS 和部分安卓机型在唤出软键盘时，页面视口压缩但未触发 resize 事件，导致 textarea 被顶到屏幕外，或者光标位置和实际输入框错位。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 不要用 position: fixed 包裹 textarea，移动端 fixed 定位在软键盘弹出时极易失灵
• 监听 focus 事件，在里面调用 element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
• 若页面有 viewport 缩放（比如 user-scalable=yes），关掉它：

怎么限制输入长度又不影响中文/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 和事件流。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！