如何让WebKit浏览器仅允许选中页面指定可选中元素内容？

这确实是WebKit内核浏览器（比如Safari、Chrome）的一个已知行为——虽然user-select: none能禁用元素的主动选中，但当你从一个selectable元素开始拖拽选择时，WebKit会允许选择范围跨越不可选中的元素，甚至复制时会包含这些内容。Firefox的行为更符合直觉，但我们可以用JavaScript来修正WebKit的这个问题，强制选择范围被可选中元素限制。

核心思路 #

通过监听selectionchange事件，每次用户调整选择范围时，检查选中内容是否包含不可选中的元素。如果包含，就手动调整选择范围，只保留可选中元素内的内容，或者直接清除无效的选择。

完整实现代码 #

<html>
<head>
<style type="text/css">
body { -webkit-user-select: none; user-select: none; }
.selectable { -webkit-user-select: text; user-select: text; }
</style>
</head>
<body>
<p class="selectable">You should be able to select this text.</p>
<p>Hey, you can't select this text!</p>
<p class="selectable">You should be able to select this text.</p>
<textarea rows="5"></textarea>

<script>
document.addEventListener('selectionchange', function() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const startNode = range.startContainer;
  const endNode = range.endContainer;

  // 检查起始/结束节点是否属于可选中元素
  const isStartValid = checkIfSelectable(startNode);
  const isEndValid = checkIfSelectable(endNode);

  if (!isStartValid || !isEndValid) {
    selection.removeAllRanges();
    return;
  }

  // 检查选择范围内是否存在不可选中元素
  const hasUnselectable = Array.from(range.commonAncestorContainer.querySelectorAll('*')).some(node => {
    const style = window.getComputedStyle(node);
    return style.userSelect === 'none' || style.webkitUserSelect === 'none';
  });

  if (hasUnselectable) {
    const startSelectableEl = findClosestSelectable(startNode);
    const endSelectableEl = findClosestSelectable(endNode);

    if (startSelectableEl && endSelectableEl) {
      const newRange = document.createRange();
      // 同一可选中元素内，选中全部内容
      if (startSelectableEl === endSelectableEl) {
        newRange.selectNodeContents(startSelectableEl);
      } else {
        // 跨元素时，只保留起始元素末尾到结束元素开头的有效范围
        newRange.setStart(startNode, startNode.length);
        newRange.setEnd(endNode, 0);
      }
      selection.removeAllRanges();
      selection.addRange(newRange);
    } else {
      selection.removeAllRanges();
    }
  }
});

// 递归检查节点是否属于可选中元素
function checkIfSelectable(node) {
  let current = node;
  while (current !== document.body) {
    if (current.nodeType === Node.ELEMENT_NODE) {
      const style = window.getComputedStyle(current);
      if (style.userSelect === 'text' || style.webkitUserSelect === 'text') return true;
      if (style.userSelect === 'none' || style.webkitUserSelect === 'none') return false;
    }
    current = current.parentNode;
  }
  return false;
}

// 查找最近的可选中祖先元素
function findClosestSelectable(node) {
  let current = node;
  while (current !== document.body) {
    if (current.nodeType === Node.ELEMENT_NODE) {
      const style = window.getComputedStyle(current);
      if (style.userSelect === 'text' || style.webkitUserSelect === 'text') return current;
    }
    current = current.parentNode;
  }
  return null;
}
</script>
</body>
</html>

代码说明 #

1. selectionchange事件监听：每次用户选择内容变化时触发，是我们干预选择范围的入口。
2. 有效性检查：通过checkIfSelectable判断选择的起始/结束节点是否在可选中元素内，无效则直接清除选择。
3. 范围修正：如果选择范围包含不可选中元素，通过findClosestSelectable找到最近的可选中元素，调整选择范围到有效区域内。

这个方案在iOS Safari、桌面Chrome、移动端Chrome都能生效，实现和Firefox一致的选择行为——仅允许选中selectable类元素内的内容，复制时也不会包含不可选中的文本。

内容的提问来源于stack exchange，提问作者Velda