如何禁用选择div中的某些文本？答案

【问题标题】：How to disable selecting some of the text in div?如何禁用选择div中的某些文本？
【发布时间】：2025-07-13 15:45:01
【问题描述】：

假设我有一个带有标记的文本，例如：

而且我想禁用选择以使选择的开始或结束不在标记中。因此，所有这些选择都应该是可能的：

另一方面，应该禁用这些选择：

到目前为止，我只尝试使用一些简单的 css，

mark {
   -khtml-user-select: all;
   -webkit-user-select: all;
   -o-user-select: all;
   user-select: all;
}

This is &lt;mark&gt;marked text&lt;/mark&gt;. I want to disable selecting only part of &lt;mark&gt;marked text&lt;/mark&gt;.

jsfiddle link

有没有办法做到这一点？任何答案将不胜感激！

我实现了我想做的，所以在这里分享。

function checkSelection () {
  var sel = window.getSelection();
  var marks = document.getElementsByTagName('mark');
  for(var i = 1; i < sel.rangeCount; i++) {
    sel.removeRange(sel.getRangeAt(i));
  }
  var range = sel.getRangeAt(0);
  var startnode = range.startContainer;
  var endnode = range.endContainer;
  for (var i = 0; i < marks.length; i++) {
  	if (marks[i].contains(startnode)) {
      range.setStartBefore(startnode);
    }
  	if (marks[i].contains(endnode)) {
      range.setEndAfter(endnode);
    }
  }
}

document.addEventListener('mouseup', checkSelection)
document.addEventListener('touchend', checkSelection)

This is &lt;mark&gt;marked text&lt;/mark&gt;. I want to disable selecting only part of &lt;mark&gt;marked text&lt;/mark&gt;.

jsfiddle link

【问题讨论】：

我没有看到任何简单的方法来做到这一点。您必须解析文本、使用鼠标事件、添加类等。
您可以提交一些错误报告并希望浏览器供应商修复它。 drafts.csswg.org/css-ui-4/#valdef-user-select-all “如果选择包含元素的一部分，那么选择必须包含整个元素，包括其所有后代” - 它没有说明选择必须以单击开始（MDN 告诉我们）跨度>
至于“有没有办法做到这一点”部分，见*.com/questions/985272/…（是）
请考虑将现有答案之一标记为已接受或创建并接受您自己的答案，以便解决此问题。

标签： javascript html css selection

【解决方案1】：

我认为单独使用 CSS 是不可能的，您很可能需要 JavaScript 来检测用户开始选择哪些元素。

我所做的是使用 Selection API 中的 containsNode 方法（一个工作草案，可能尚不适用于所有浏览器，并且可能已被弃用）来检测所选范围是否包含整个标记的元素或根本不包含。如果选择只包含标记元素的一部分，它将使用removeAllRanges 方法清除选择。

function checkSelection () {
  var sel = window.getSelection()
  var marks = document.getElementsByTagName('mark')
  for (var i = 0; i < marks.length; i++) {
    if (sel.containsNode(marks[i], false) !== sel.containsNode(marks[i], true))
      sel.removeAllRanges()  // clear selection
  }
}

document.addEventListener('mouseup', checkSelection)
document.addEventListener('touchend', checkSelection)

mark {
  background: yellow;
}

This is &lt;mark&gt;marked text&lt;/mark&gt;. I want to disable selecting only part of &lt;mark&gt;marked text&lt;/mark&gt;.

请注意，您需要捕获所有您想要的选择方法，无论是通过鼠标事件和触摸事件（我包括的所有）、键盘插入符号选择还是编程选择。

这可以根据您的喜好进行扩展和调整，但这是我从规范中复制您想要的行为的最佳方法。如果选择的边界之一在标记区域的边缘开始或结束，则上述 sn-p 不会一直正常工作，但是 sn-p 应该展示应该工作的基本概念，只是稍微好一点- 调整边缘情况。

【讨论】：

+1 提供一些有用的想法！ However, it fails when the selection starts or ends at the border of the mark.
@didgogns 我在回答中确实提到了这个案例。我已经为您提供了完成您要求的任务的基本代码，并解释了它的工作原理。要将其调整为特定的偏好，您必须对其进行编辑以完全符合您的要求。

【解决方案2】：

user-select CSS 属性尚未正式发布，仅最新浏览器支持。

无论如何，您都可以使用user-select: none; 并将所有无法选择的文本括在span 标记内

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

但是你可以试试这样的

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

&lt;p&gt;This text can be selected, But &lt;span class="unselectable"&gt;this&lt;/span&gt; can only be &lt;span class="unselectable"&gt;partially se&lt;/span&gt;lected&lt;/p&gt;

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

【讨论】：

他不想要无法选择，只是无法选择部分。