应使用 实现多行文本输入，它原生支持换行、滚动和响应输入； 无法通过 rows/cols 变为多行，且 必须闭合、用 .value 读写内容、靠 CSS 精确控制尺寸。
用
HTML5 里没有叫“多行文本框”的新标签，实现多行输入靠的是 元素——它原生支持换行、回车和滚动，且无需额外 JS 就能响应用户输入。
常见误区是试图给 加 rows 或 cols 属性，这完全无效： 永远单行，加了也忽略。
-
是双标签，必须有闭合（），内容写在开始与结束标签之间 - 默认无宽度高度，需用 CSS 或原生属性控制尺寸
- 不支持
value属性设置初始值，应把文本放在标签体内
rows 和 cols 是提示值，不是绝对限制
这两个属性只影响初始显示的行数和字符宽度，浏览器会据此估算高度/宽度，但用户仍可拖拽缩放（除非用 CSS 禁用），也能输入远超 cols 的长行内容。
更可靠的做法是用 CSS 控制：
立即学习“前端免费学习笔记（深入）”；
-
resize: vertical允许用户仅上下拉伸，避免布局错乱 -
max-width防止在宽屏下过宽 -
height比rows更精确控制视觉高度
如何获取和设置内容？别用 value 属性读取
JavaScript 中操作 内容，必须用 .value 属性读写，不能依赖 getAttribute('value') —— 因为它的初始值不在属性里，而在标签体中。
例如：
const ta = document.querySelector('textarea');
console.log(ta.value); // ✅ 正确：获取当前全部文本（含换行符 \n）
console.log(ta.getAttribute('value')); // ❌ 返回 null，该属性不存在
- 提交表单时，
的值会自动作为字段发送，name 属性不可少 - 若需预填充内容，直接写在标签内：
- 动态设值用
ta.value = '新内容'，不是ta.innerHTML
移动端软键盘弹出后遮挡
这是实际开发中最常被忽略的问题：iOS 和部分安卓 WebView 中，聚焦 后软键盘顶起页面，但元素本身不会自动滚动到可视区。
简单修复方式（无需框架）：
document.querySelector('textarea').addEventListener('focus', function() {
setTimeout(() => this.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100);
});
- 加
setTimeout是因为聚焦瞬间 DOM 可能还没完成重排 -
block: 'nearest'避免过度滚动，比'center'更稳妥 - 如果页面已有滚动容器（如
overflow-y: auto的 div），需对那个容器调用scrollIntoView
\n 而非 ，服务端接收后要按需处理；还有 autofocus、placeholder、maxlength 等属性虽可用，但兼容性细节容易漏掉。
