如何禁用选择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

我不认为单独使用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 <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

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

---

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

Answer 2

用户选择的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;
}

<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