<textarea>-多行文本输入

<textarea> 是 HTML 中用于创建多行文本输入框的标签，适用于用户需要输入较长文本的场景，如评论、留言或表单中的自由文本输入。它支持动态调整大小、占位文本、禁用状态等特性，并能通过 CSS 和 JavaScript 进一步定制交互效果。

<textarea> 的基本语法

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

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

• rows 和 cols 分别定义文本框的初始行数和列数（以字符为单位）。若未指定，浏览器会使用默认值。
• 标签之间的内容会作为默认文本显示在输入框中。

核心属性详解

1. name 和 id

• name：用于表单提交时标识数据，后端通过此属性获取值。
• id：用于 JavaScript 或 CSS 选择器。

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

2. placeholder

提供提示文本，用户输入时自动消失：

<textarea placeholder="请输入至少 20 个字符..."></textarea>

3. disabled 和 readonly

• disabled：禁用输入，数据不会提交。
• readonly：只读，但数据会提交。

<textarea disabled>不可编辑的内容</textarea>
<textarea readonly>只读内容（可提交）</textarea>

4. maxlength 和 minlength

限制输入字符数：

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

5. autofocus

页面加载时自动聚焦：

<textarea autofocus></textarea>

6. form

关联表单 ID，即使 <textarea> 在 <form> 标签外也能提交：

<form id="my_form">
  <button type="submit">提交</button>
</form>
<textarea form="my_form" name="external_text"></textarea>

样式与布局控制

1. 通过 CSS 调整尺寸

优先使用 CSS 的 width 和 height 替代 rows/cols：

textarea {
  width: 300px;
  height: 150px;
  resize: both; /* 允许用户调整大小（可选值：none|both|horizontal|vertical） */
}

2. 响应式设计

使用相对单位或媒体查询适应不同屏幕：

textarea {
  width: 100%;
  min-height: 100px;
}

JavaScript 交互示例

1. 动态获取和设置值

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

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

2. 实时字符计数

<textarea id="dynamic_text"></textarea>
<div id="counter">0/200</div>

<script>
  const textarea = document.getElementById('dynamic_text');
  const counter = document.getElementById('counter');
  const maxLength = 200;

  textarea.addEventListener('input', () => {
    counter.textContent = `${textarea.value.length}/${maxLength}`;
  });
</script>

实际应用场景

1. 表单提交

结合 <form> 和服务器端处理：

<form action="/submit-comment" method="POST">
  <textarea name="comment" required></textarea>
  <button type="submit">提交评论</button>
</form>

2. 富文本编辑器基础

通过 JavaScript 增强功能（如加粗、斜体）：

<textarea id="rich_text"></textarea>
<button onclick="formatText('bold')">加粗</button>

<script>
  function formatText(format) {
    const textarea = document.getElementById('rich_text');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = textarea.value.substring(start, end);
    let wrappedText;

    if (format === 'bold') {
      wrappedText = `**${selectedText}**`;
    }
    
    textarea.value = 
      textarea.value.substring(0, start) + 
      wrappedText + 
      textarea.value.substring(end);
  }
</script>

兼容性与注意事项

• 浏览器支持：所有现代浏览器均支持 <textarea>，但某些属性（如 minlength）在旧版 IE 中可能无效。
• 性能问题：极长的文本（如数万行）可能导致渲染卡顿，需考虑分页或虚拟滚动。
• 换行符处理：表单提交时，换行符会转换为 \r\n（HTTP 规范），后端需注意统一处理。