<textarea>-多行文本输入

<textarea> 是 HTML 中用于创建多行文本输入框的标签，允许用户输入较长的文本内容。它支持多种属性来控制其行为和样式，适用于表单、评论框、聊天输入等场景。

<textarea> 的基本语法

<textarea> 是一个双标签，其基本语法如下：

<textarea rows="4" cols="50">
  默认文本内容
</textarea>

• rows 属性定义文本区域的可视行数。
• cols 属性定义文本区域的可视宽度（以字符为单位）。
• 标签之间的内容会作为默认文本显示在输入框中。

如果省略 rows 和 cols，浏览器通常会使用默认值（通常是 2 行和 20 个字符宽度）。

<textarea> 的常用属性

<textarea> 支持多种属性来增强其功能：

1. name 属性

name 属性用于标识文本区域的数据，在表单提交时作为键名：

<textarea name="user_comment"></textarea>

提交表单时，数据会以 user_comment=输入的内容 的形式发送到服务器。

2. placeholder 属性

placeholder 提供提示文本，当输入框为空时显示，输入内容后消失：

<textarea placeholder="请输入您的反馈..."></textarea>

3. disabled 和 readonly 属性

• disabled 禁用文本区域，用户无法编辑且数据不会提交：

  <textarea disabled>此区域不可编辑</textarea>
  

• readonly 设置为只读，用户无法编辑但数据会提交：

  <textarea readonly>只读内容</textarea>
  

4. maxlength 和 minlength 属性

• maxlength 限制最大输入字符数：

  <textarea maxlength="200"></textarea>
  

• minlength 设置最小输入字符数（提交时会验证）：

  <textarea minlength="10"></textarea>
  

5. autofocus 属性

页面加载时自动聚焦到文本区域：

<textarea autofocus></textarea>

6. form 属性

将 <textarea> 与表单关联（即使不在 <form> 标签内）：

<form id="myForm">
  <button type="submit">提交</button>
</form>
<textarea form="myForm" name="ext_text"></textarea>

7. wrap 属性

控制文本换行方式：

• soft（默认）：文本在提交时不包含换行符。
• hard：文本在提交时保留换行符（需配合 cols 使用）：

<textarea wrap="hard" cols="30"></textarea>

样式与尺寸控制

通过 CSS 调整样式

<textarea> 可以通过 CSS 自定义外观：

<style>
  .custom-textarea {
    width: 300px;
    height: 150px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-family: Arial;
    resize: none; /* 禁止调整大小 */
  }
</style>
<textarea class="custom-textarea"></textarea>

resize 属性

控制用户是否可以调整文本区域大小：

• both（默认）：允许水平和垂直调整。
• horizontal/vertical：仅允许水平或垂直调整。
• none：禁止调整。

<textarea style="resize: vertical;"></textarea>

动态操作与 JavaScript 示例

获取和设置值

通过 JavaScript 操作 <textarea> 的内容：

<textarea id="myTextarea">初始文本</textarea>
<button onclick="getText()">获取文本</button>
<button onclick="setText()">设置文本</button>

<script>
  function getText() {
    const text = document.getElementById("myTextarea").value;
    alert("当前内容：" + text);
  }
  function setText() {
    document.getElementById("myTextarea").value = "新文本内容";
  }
</script>

实时字符计数

实现输入时显示剩余字符数：

<textarea id="msg" maxlength="100"></textarea>
<div>剩余字数：<span id="counter">100</span></div>

<script>
  const textarea = document.getElementById("msg");
  const counter = document.getElementById("counter");
  
  textarea.addEventListener("input", () => {
    const remaining = 100 - textarea.value.length;
    counter.textContent = remaining;
  });
</script>

实际应用场景

表单中的多行输入

典型的评论表单示例：

<form action="/submit-comment" method="post">
  <label for="comment">评论：</label>
  <textarea id="comment" name="comment" rows="5" required></textarea>
  <button type="submit">提交</button>
</form>

配合其他表单控件

结合单选按钮动态切换 <textarea> 的禁用状态：

<input type="radio" name="feedback_type" id="type1" checked>
<label for="type1">简单反馈</label>
<input type="radio" name="feedback_type" id="type2">
<label for="type2">详细反馈</label>

<textarea id="detail_feedback" disabled></textarea>

<script>
  document.querySelectorAll('input[name="feedback_type"]').forEach(radio => {
    radio.addEventListener("change", (e) => {
      document.getElementById("detail_feedback").disabled = e.target.id !== "type2";
    });
  });
</script>

与其他标签的对比

与 <input type="text"> 的区别

何时选择 <textarea>

• 需要用户输入多行文本（如评论、描述、地址等）。
• 输入内容可能包含换行符。
• 需要更大的可视输入区域。

高级技巧与注意事项

自动调整高度

通过 JavaScript 实现根据内容自动调整高度：

<textarea id="auto-resize" rows="1"></textarea>

<script>
  const textarea = document.getElementById("auto-resize");
  textarea.addEventListener("input", () => {
    textarea.style.height = "auto";
    textarea.style.height = textarea.scrollHeight + "px";
  });
</script>

输入验证

结合 HTML5 约束验证 API：

<form>
  <textarea required minlength="10" maxlength="500"></textarea>
  <button type="submit">提交</button>
</form>

性能优化

对于超大文本（如日志显示），考虑使用 contenteditable 的 <div> 替代：

<div contenteditable style="width: 300px; height: 200px; border: 1px solid #000;"></div>

浏览器兼容性与陷阱

• 所有现代浏览器都支持 <textarea> 的基本功能。
• minlength 在旧版 IE 中不受支持。
• 移动设备上可能会触发不同的虚拟键盘布局。
• 粘贴富文本时会丢失样式（纯文本保留）。