HTML 的 ＜textarea＞ 元素

1. 什么是

<textarea> 是 HTML 中用于多行文本输入的表单元素。与单行的 <input type="text"> 不同，<textarea> 允许用户输入多行文字，并支持换行。它常用于留言板、评论框、意见反馈、代码编辑器等场景。

<textarea>这里是默认内容</textarea>

2. 基本语法与属性

2.1 基本结构

<textarea> 是一个双标签元素，起始标签和结束标签之间的文本即为默认显示内容：

<textarea rows="5" cols="30">
这是默认显示的文本
</textarea>

2.2 常用属性

属性	说明	示例
name	表单提交时的字段名	name="comment"
rows	可见行数	rows="5"
cols	可见列数（字符宽度）	cols="30"
placeholder	占位提示文本	placeholder="请输入内容"
maxlength	最大输入字符数	maxlength="200"
minlength	最小输入字符数	minlength="10"
readonly	只读，不可编辑	readonly
disabled	禁用，不可交互且不提交	disabled
required	必填校验	required
wrap	换行方式（soft/hard）	wrap="soft"

2.3 与 input 的区别

对比项	<input>	<textarea>
行数	单行	多行
换行	不支持	支持
默认值写法	value="..."	标签内文本
结束标签	自闭合	必须有 </textarea>

3. 表单提交与取值

3.1 配合 form 提交

<form action="/submit" method="post">
  <label for="feedback">意见反馈：</label>
  <textarea id="feedback" name="feedback" rows="6" required></textarea>
  <button type="submit">提交</button>
</form>

3.2 通过 JavaScript 获取值

// 获取 textarea 的值
const textarea = document.getElementById('feedback');
const value = textarea.value;
console.log(value);

// 设置 textarea 的值
textarea.value = '新的内容';

3.3 监听输入事件

textarea.addEventListener('input', (event) => {
  const currentLength = event.target.value.length;
  console.log(`当前输入 ${currentLength} 个字符`);
});

4. 样式美化

4.1 基础样式

textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical; /* 允许垂直调整大小 */
  box-sizing: border-box;
}

4.2 聚焦状态

textarea:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2);
}

4.3 禁用与只读样式

textarea:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

textarea[readonly] {
  background-color: #fafafa;
  color: #666;
}

5. 进阶技巧

5.1 自动调整高度

function autoResize(textarea) {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

const ta = document.getElementById('auto-ta');
ta.addEventListener('input', () => autoResize(ta));

5.2 实时字数统计

<textarea id="content" maxlength="500"></textarea>
<p>已输入 <span id="count">0</span> / 500 字</p>

const content = document.getElementById('content');
const count = document.getElementById('count');

content.addEventListener('input', () => {
  count.textContent = content.value.length;
});

5.3 回车键提交（聊天框场景）

const chatInput = document.getElementById('chat-input');

chatInput.addEventListener('keydown', (event) => {
  // 按 Enter 发送，Shift + Enter 换行
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();
    sendMessage(chatInput.value);
    chatInput.value = '';
  }
});

6. 常见问题与注意事项

• 默认值不要写在 value 属性里 ：<textarea> 的默认内容写在标签之间，写在 value 属性上无效。
• 标签内不要有多余空白：起始标签和结束标签之间的空格、换行会被当作默认值的一部分显示。
• cols 与 rows 只是初始尺寸：实际显示大小受 CSS 影响，建议用 CSS 控制宽度和高度。
• wrap="hard" 需要配合 cols 使用：提交时会在固定列宽处插入换行符。
• disabled 与 readonly 的区别 ：disabled 的值不会随表单提交，readonly 的值会提交。
• 移动端体验 ：建议设置 font-size: 16px 以上，避免 iOS 在聚焦时自动放大页面。

7. 总结

<textarea> 是构建多行文本输入的核心元素，掌握它的属性、取值方式和样式技巧，可以轻松实现评论框、留言板、聊天输入框等常见交互。配合 JavaScript 还能实现自动高度、字数统计、快捷键提交等增强功能，是前端开发中非常实用的一环。