如何禁止选择 div 中的某些文本？

Question

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

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

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

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

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

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

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 <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

Answer 1

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

无论如何，您可以使用 user-select: none; 并将所有无法 select 编辑的文本包含在 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;
}

<p>This text can be selected, But <span class="unselectable">this</span> can only be <span class="unselectable">partially se</span>lected</p>

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

Answer 2

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

我所做的是我使用了选择 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 <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

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

这可以根据您的喜好进行扩展和调整，但这是我从您的规范中复制您想要的行为的最佳方式。如果选择的边界之一在标记区域的边缘开始或结束，上面的代码片段不会一直正常工作，但代码片段应该展示应该工作的基本概念，只需对边缘进行一些微调案例。

如何禁止选择 div 中的某些文本？

How to disable selecting some of the text in div?

html

javascript

css

selection