Javascript 禁用contenteditable=true div中的文本选择

我正在尝试禁用

contenteditable=true

div

中的文本选择

id为

d

的div如下所示：

<div contenteditable="true" id="d" class="noselect"> 

</div>

<p id="log"></p>

但这似乎不起作用。我仍然可以执行

ctrl+a

，或者拖动并选择所有文本。如何禁用选择

---

这里还有一个技巧：

您可以通过设置“selection”伪元素来模拟无法使用选择：

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

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