如何通过Tab键聚焦时选中多个textarea的默认文本？

安全阿岳

2026-8-16

简化多Textarea自动选中默认文本的实现

方案一：封装复用函数+批量选择元素

先给所有需要实现自动选中的textarea统一添加一个类（比如auto-select），然后通过封装函数批量绑定事件：

HTML 结构示例

<textarea id="textarea_1" class="auto-select">默认文本内容</textarea>
<textarea id="textarea_2" class="auto-select">默认文本内容</textarea>
<textarea id="textarea_3" class="auto-select">默认文本内容</textarea>

简化后的JS代码

// 封装通用的自动选中处理逻辑
function setupAutoSelect(textarea) {
  textarea.addEventListener('focus', function() {
    // 聚焦时选中全部文本
    this.select();
    
    // 修复Chrome中鼠标点击会取消选中的问题
    const handleMouseUp = () => {
      this.removeEventListener('mouseup', handleMouseUp);
      return false;
    };
    this.addEventListener('mouseup', handleMouseUp);
  });
}

// 批量获取目标textarea并绑定事件
document.querySelectorAll('.auto-select').forEach(setupAutoSelect);

方案二：事件委托（适合动态添加的Textarea）

如果你的textarea是通过JS动态生成的，用事件委托更高效，无需给每个元素单独绑定事件：

// 给父容器（或body）绑定事件，利用事件冒泡处理
document.body.addEventListener('focus', function(e) {
  // 仅处理带有auto-select类的textarea
  if (e.target.classList.contains('auto-select')) {
    const textarea = e.target;
    textarea.select();
    
    const handleMouseUp = () => {
      textarea.removeEventListener('mouseup', handleMouseUp);
      return false;
    };
    textarea.addEventListener('mouseup', handleMouseUp);
  }
}, true); // 捕获阶段触发，确保focus事件被正确拦截