今日学习重点
掌握<textarea>元素，实现：

• 多行文本输入
• 可调整大小的文本框
• 带格式的文本输入区域

基础结构

基本文本域

<textarea name="comment" rows="4" cols="50">
这里是默认文本...
</textarea>

核心属性：

• rows：可见行数（高度）
• cols：可见列数（宽度）
• 内容写在开闭标签之间（与<input>不同）

进阶用法

1. 禁用调整大小

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

（默认允许用户拖动调整大小）

2. 限制输入长度

<textarea maxlength="200" placeholder="最多输入200字..."></textarea>

3. 自动聚焦

<textarea autofocus></textarea>

实用技巧

1. 响应式设计

textarea {
  width: 100%;
  min-height: 100px;
  max-width: 600px;
  padding: 10px;
  box-sizing: border-box; /* 防止padding影响宽度计算 */
}

2. 禁用拼写检查

<textarea spellcheck="false"></textarea>

3. 占位符样式

textarea::placeholder {
  color: #999;
  font-style: italic;
}

常见问题

1. XSS攻击风险：html复制下载运行<!-- 用户输入的HTML/JS会被执行 --> <textarea><script>alert('危险')</script></textarea>（需服务器端转义处理）
2. 移动端体验：iOS可能自动大写首字母虚拟键盘可能遮挡输入区域
3. 内容溢出处理：css复制下载textarea { overflow-y: auto; /* 必要时显示滚动条 */ white-space: pre-wrap; /* 保留换行和空格 */ }

实战案例

1. 评论表单

<form>
  <label for="comment">发表评论：</label>
  <textarea id="comment" name="comment" 
            placeholder="文明上网，理性发言..."
            minlength="10" maxlength="500"
            required></textarea>
  <button type="submit">提交</button>
</form>

2. 代码编辑器

<textarea class="code-editor" spellcheck="false">
function hello() {
  console.log("Hello World!");
}
</textarea>

<style>
  .code-editor {
    font-family: 'Courier New', monospace;
    background: #f5f5f5;
    border-left: 3px solid #4CAF50;
  }
</style>

3. 实时字数统计

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

<script>
  const tweet = document.getElementById('tweet');
  const counter = document.getElementById('counter');
  
  tweet.addEventListener('input', () => {
    counter.textContent = 280 - tweet.value.length;
  });
</script>

记住：<textarea>就像给用户的空白笔记本——给的空间越大，收获的内容可能越丰富（也可能越啰嗦）。就像程序员写代码注释——太少别人看不懂，太多又显得啰嗦。找到平衡点才是艺术！