移动端点击选中div内全部文本功能失效问题求解

API 探路者

2026-8-4

解决iOS Safari单次轻触选中Div内全部文本的纯JS方案

问题背景

桌面端通过点击事件调用selectAllChildren()可选中Div内全部文本，但该逻辑在iOS Safari（及多数Android浏览器）失效；若使用touchstart事件触发，会导致滚动页面时误触触发选中，需一种兼容移动端且无干扰的纯JS方案。

核心解决方案

通过以下步骤实现兼容：

给目标Div添加tabindex="0"，使其可被聚焦（iOS操作文本选中的必要条件）
阻止iOS默认的长按选中行为，避免与自定义选中逻辑冲突
使用Range API创建选中范围，替代selectAllChildren()提升移动端兼容性
在点击事件中完成选中操作，同时确保元素聚焦

完整代码

HTML

<div id="target" tabindex="0">
  <span>click to select all </span>
  <span>text</span>
</div>

JavaScript

const targetEl = document.getElementById('target');

// 阻止iOS默认长按选中行为，避免干扰自定义逻辑
targetEl.addEventListener('touchstart', function(e) {
  e.preventDefault();
}, { passive: false });

// 处理点击/轻触事件，完成全选
targetEl.addEventListener('click', function() {
  const selection = window.getSelection();
  const range = document.createRange();
  
  // 选中当前元素的全部子内容
  range.selectNodeContents(this);
  
  // 清除原有选中，应用新的选中范围
  selection.removeAllRanges();
  selection.addRange(range);
  
  // 确保元素处于聚焦状态，维持iOS下的选中效果
  this.focus();
});