在contenteditable = 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;
}

要实际上禁用选择功能，您可以侦听“ click”事件，并检查您的元素是否具有选择。如果确实如此，则将其取消：

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);
    }
});