防止在内容可编辑的 div 中选择/突出显示文本

Question

有没有办法创建一个内容可编辑的 div，用户无法选择/突出显示内容但仍然可以输入内容？我想创建一个界面，用户被迫逐键删除和输入内容，而无法通过突出显示进行批量编辑。

我研究了 CSS 中“用户选择”属性的各种形式，它适用于静态内容，但似乎不适用于内容可编辑的元素/输入。

有任何想法吗？

谢谢

Answer 1

如果您可以接受 atextarea而不是 contenteditable div，您可以执行以下操作：

window.onload = function () {
    var div = document.getElementById('div');
    if (div.attachEvent) {
        div.attachEvent('onselectstart', function (e) {
            e.returnValue = false;
            return false;
        });
        div.attachEvent('onpaste', function (e) {
            e.returnValue = false;
            return false;
        });
    } else {
        div.addEventListener('paste', function (e) {
            e.preventDefault();
        });
        div.addEventListener('select', function (e) {
            var start = this.selectionStart,
                end = this.selectionEnd;
            if (this.selectionDirection === 'forward') {
                this.setSelectionRange(end, end);
            } else {
                this.setSelectionRange(start, start);
            }
        });
    }
};

HTML：

<form>
    <textarea id="div"></textarea>
</form>

jsFiddle 的现场演示。

对代码的一些观察：

• 在许多浏览器中，仅针对或中的元素onselect触发。这就是 HTML 与您的不同的原因。inputtextareaform
• IE9 - 10 不支持selectionDirection，这就是为什么 IE 的旧事件处理模型也用于这些浏览器。
• 如果不是 IE，您仍然可以通过用鼠标选择文本并按下按键而不释放鼠标按钮来替换一堆文本。我想可以通过检测鼠标按钮是否按下来防止这种情况，并在这种情况下阻止键盘操作。这将是你的家庭作业；）。
• IE 的代码div也适用于 contenteditable 。

编辑

看来我也做了你的“功课”。