时间戳

首页 > 解决方案 > 在 contenteditable = true div 中禁用文本选择

javascript - 在 contenteditable = true div 中禁用文本选择

问题描述

我正在尝试禁用contenteditable=true div.

带有 id 的 divd如下所示：

<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/

标签： javascripthtml

解决方案

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

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

推荐阅读