textarea默认值应写在标签内而非value属性；设maxlength限制长度但需配合后端校验；换行符需前后端统一为\n；移动端需自适应高度并避免overflow:hidden。

textarea 默认值怎么设才不会被用户误删？

直接写在标签内部的文本就是默认值，但很多人用 value 属性——这是无效的。textarea 不支持 value，设了也不显示。

• 正确写法：

  <textarea>欢迎留言～</textarea>

• 如果用 JavaScript 动态设默认值，得操作 textContent 或 innerHTML，不是 value
• 注意：HTML 实体（如  ）会被解析成空格，想保留首尾空格要加 wrap="soft" 并确保换行符存在

如何限制输入长度又不让用户卡住？

maxlength 能拦住超出字符，但只对 UTF-16 编码计数，中文、emoji 都算 1 个字符——这点和后端校验常不一致。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 前端用：maxlength="200"，浏览器会禁用超长输入
• 但微信、iOS 输入法某些场景下仍可能绕过，必须配合后端校验
• 别用 size 属性控制长度，它只影响显示宽度，和字数无关
• 想实时提示剩余字数？监听 input 事件读取 element.value.length

换行和缩进为什么一提交就没了？

HTML 渲染时会把连续空白符（空格、制表符、换行）合并成单个空格，textarea 里的换行是真实存在的，但显示到页面上需额外处理。

• 提交后服务端存的是带 \n 的原始字符串，没问题
• 但若直接用 innerText 插入 DOM，换行会丢失；改用 textContent 或 CSS 加 white-space: pre-wrap
• 用户按 Tab 键默认不会插入制表符，需捕获 keydown 拦截 Tab 并手动插入 \t

移动端键盘弹起后 textarea 被遮挡怎么办？

这不是 textarea 自身的问题，而是 viewport 和 focus 行为差异导致的。iOS 尤其明显。

• 避免固定高度 + overflow: auto，改用自适应高度：style="height: auto; min-height: 100px;"，再用 JS 监听 input 调整 scrollHeight
• 不要给父容器设 overflow: hidden，否则 iOS 键盘弹起时无法滚动到焦点位置
• 部分安卓 WebView 对 scrollIntoView() 支持差，可加延迟：setTimeout(() => el.scrollIntoView(), 100)

实际用起来最麻烦的其实是换行渲染和服务端存储格式对齐，前端看到的 \n，后端存成 \r\n 或去掉换行，展示时就会错乱。这事得前后端提前约定好换行符统一用 \n。

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