几乎每一个需要用户输入多段文本的网页——无论是博客评论区、产品反馈表，还是在线笔记工具——都离不开 <textarea>。它像一个轻便的“记事本”，让用户可以自由换行、书写长文。然而，很多人只用了它最基础的 rows 和 cols 属性，忽略了它的强大潜能。
本文将带你系统性地重新认识 <textarea>，从核心属性、样式控制、表单行为，到 JavaScript 增强技巧，再到可访问性与常见坑点，最终让你能自信地在项目中运用它。
一、<textarea> 是什么？
<textarea> 是 HTML 中用于 多行纯文本输入 的表单控件。与 <input type="text"> 不同，它允许用户输入换行符（按下 Enter 键），因此特别适合输入评论、邮件正文、代码片段等较长的内容。
注意：<textarea> 只能包含纯文本，不能包含富文本（如加粗、颜色等）。如果需要富文本编辑，应考虑使用 contenteditable 或专门的库。
二、核心属性详解
2.1 尺寸与布局属性
属性 | 说明 | 示例 |
rows | 可见行数（高度），不是严格像素，而是字符行高 | <textarea rows="4"> |
cols | 可见宽度（平均字符数），建议配合 CSS 宽度使用 | <textarea cols="50"> |
实践中，更推荐用 CSS 的 width 和 height 控制尺寸，rows 和 cols 可作为降级方案。
2.2 表单相关属性
属性 | 说明 | 示例 |
name | 表单提交时的字段名（必须设置） | name="message" |
form | 关联外部表单的 id | form="myForm" |
required | 必填校验 | required |
disabled | 禁用控件，无法编辑且数据不提交 | disabled |
readonly | 只读，可以聚焦、复制，但不可修改 | readonly |
2.3 内容限制与提示
属性 | 说明 | 示例 |
maxlength | 最大字符数（超出无法输入） | maxlength="200" |
minlength | 最小字符数（提交时校验） | minlength="10" |
placeholder | 输入提示，用户输入后消失 | placeholder="请填写..." |
2.4 换行行为 —— wrap
wrap 是容易混淆的属性：
示例：
<textarea cols="40" wrap="hard"></textarea>
2.5 其他实用属性
属性 | 说明 |
spellcheck="true" | 开启浏览器拼写检查 |
autocomplete="off" | 禁止自动填充 |
autofocus | 页面加载时自动获得焦点 |
三、默认值如何设置？
与 <input> 使用 value 属性不同，<textarea> 的默认内容应写在 开始和结束标签之间：
<textarea>这是默认显示的文本</textarea>
不要尝试用 value 属性，它会被忽略。同时，标签内不要有多余空格，否则会成为默认内容的一部分。
四、CSS 样式与行为控制
4.1 基础样式重置与优化
textarea { width: 100%; box-sizing: border-box; padding: 14px; font-family: inherit; font-size: 16px; line-height: 1.5; border: 1px solid #ccc; border-radius: 8px; resize: vertical; transition: 0.2s;}
textarea:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);}
4.2 控制调整大小（resize）
.resize-none { resize: none; }.resize-both { resize: both; }.resize-horizontal { resize: horizontal; }.resize-vertical { resize: vertical; }
4.3 隐藏多余滚动条
当内容未溢出时，默认滚动条可能出现。可以这样处理：
textarea { overflow: auto; }
五、JS 增强：让 textarea 更智能
5.1 实时字符计数（带警告）
<textarea id="comment" maxlength="300" rows="4"></textarea><div>已输入 <span id="count">0</span> / 300 字符</div>
<script> const ta = document.getElementById('comment'); const countSpan = document.getElementById('count'); ta.addEventListener('input', () => { const len = ta.value.length; countSpan.textContent = len; countSpan.style.color = len > 280 ? '#e11d48' : '#333'; });</script>
5.2 自动扩展高度（像聊天输入框）
<textarea id="autoHeight" rows="1" placeholder="输入内容，高度自动增加"></textarea>
<script> const auto = document.getElementById('autoHeight'); auto.addEventListener('input', function () { * 先将高度设置为 auto，让浏览器重新计算元素尺寸， * 然后立即获取新的 scrollHeight 并设置为固定高度， * 这样无论是内容增加还是减少，都能正确调整高度。 */ this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; });</script>
注意：需要设置 overflow-y: hidden 避免出现滚动条闪烁。
5.3 处理换行符提交问题
不同操作系统下换行符不同（Windows 是 \r\n，Linux/macOS 是 \n）。提交到后端前，可以统一标准化：
const text = textarea.value.replace(/\r\n/g, '\n');
如果需要将文本显示在 HTML 中，需要将换行符转为 <br>：
const htmlText = textarea.value.replace(/\n/g, '<br>');
5.4 获取或设置光标位置
const start = textarea.selectionStart;const end = textarea.selectionEnd;
function insertText(textarea, insertStr) { const start = textarea.selectionStart; const end = textarea.selectionEnd; textarea.value = textarea.value.slice(0, start) + insertStr + textarea.value.slice(end); textarea.selectionStart = textarea.selectionEnd = start + insertStr.length;}
六、表单提交时的注意事项
name 必须设置，否则后端收不到数据。
如果设置了 disabled，该字段不会提交；readonly 仍会提交。
默认情况下，表单提交时会保留用户输入的所有换行符和连续空格（但 HTML 渲染时多个空格会合并，换行符不显示）。后端接收到的就是原始文本。
为了避免用户提交首尾空白，可以在提交前 .trim()：
form.addEventListener('submit', (e) => { textarea.value = textarea.value.trim();});
七、可访问性（A11Y）要点
总是使用 <label> 并通过 for 属性关联 <textarea> 的 id。
如果无法显示可见标签，添加 aria-label 属性。
动态提示（如字符计数）应包裹在 aria-live="polite" 区域内，以便屏幕阅读器自动播报变化。
不要仅用颜色表达错误（如超出 maxlength），应同时显示文本提示。
示例：
<label for="bio">个人简介</label><textarea id="bio" aria-describedby="bioHint"></textarea><div id="bioHint" aria-live="polite">最多可输入200字</div>
八、常见错误与解决方案
问题 | 原因 | 解决办法 |
默认值不显示 | 误用了 value 属性 | 写在标签之间 |
换行在 HTML 中不显示 | 未转换换行符为 <br> | 使用 .replace(/\n/g, '<br>') |
移动端点击时页面缩放 | font-size < 16px | 设置 font-size: 16px |
无法拖拽调整大小 | 忘记了 resize 属性或 CSS 覆盖 | 检查 CSS 中 resize 值 |
字符计数不准确 | 未处理粘贴、剪切等操作 | 监听 input 事件（覆盖所有变化） |
总结
<textarea> 是一个看似简单却内涵丰富的 HTML 元素。掌握它的各种属性（尤其是 wrap 和尺寸控制）、样式定制技巧以及 JavaScript 增强方法，可以让你的表单交互提升一个档次。
从字符计数、自动高度到换行符处理，再到可访问性细节，每一个知识点都能在实际开发中派上用场。
回顾一下核心要点：
默认内容写在标签之间，而不是 value 属性。
使用 maxlength 和 minlength 进行客户端长度校验。
通过 CSS resize 属性控制用户调整大小的行为。
监听 input 事件可以实现实时反馈。
提交时注意换行符标准化和首尾空白处理。
永远不要忘记 name 属性和 <label> 标签。
希望这篇文章能帮助你彻底拿下 <textarea>，在未来的项目中写出更健壮、更友好的文本输入界面。
阅读原文：https://mp.weixin.qq.com/s/ITaabahLK7k-vujQWbrO7A
该文章在 2026/5/7 9:05:36 编辑过
400 186 1886
