禁用contentedible中的文本选择= true div

Question

我正在尝试在contenteditable=true div中禁用文本选择。

带有ID d的DIV如下：

<div contenteditable="true" id="d" class="noselect"> 
</div>
<p id="log"></p>

我将noselect类应用于禁用：

的文本选择

 .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

但这似乎不起作用。我仍然可以执行ctrl+a，或者拖动并选择所有文本。我如何禁用选择？

这也是小提琴：https：//jsfiddle.net/hpelqmyg/1/

Answer 1

您可以模仿设置"选择"的选择。伪元素：

.noselect::selection {
    background: transparent;
    color: //noselect's color;
}

实际上禁用选择功能，您可以单击"单击"事件并检查您的元素是否有选择。如果确实可以取消它：

const noselect = document.getElementById('d');
const setCaret = (target, position = 0) => {
    const range = document.createRange();
    const sel = window.getSelection();
    range.setStart(target.childNodes[0], position);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
};
noselect.addEventListener('click', (e) => {
    const range = window.getSelection().getRangeAt(0);
    const { startOffset, endOffset } = range;
    if (endOffset - startOffset > 1) {
        setCaret(noselect, endOffset);
    }
});

Answer 2

我也有相同的问题，在下面发现是最简单的解决方案：

$("#d").on('click', function() {
    let selection = window.getSelection().getRangeAt(0)
    if (selection.startOffset !== selection.endOffset) {
      window.getSelection().removeAllRanges();
    }
});

Answer 3

一个简单的解决方案是使用selectstart事件。

const contentEditableDiv = document.querySelector('#divId');
contentEditableDiv.addEventListener('selectstart' , event=> event.preventDefault());

mdn docs