Question

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

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

有什么想法吗？

由于

Answer 1

如果您接受textarea而非可信任的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>

A live demo at jsFiddle

对代码的一些观察：

在许多浏览器中onselect仅针对input中的textarea或form元素触发。这是与您的HTML不同的原因。
IE9 - 10不支持selectionDirection，这就是IE的遗留事件处理模型也用于这些浏览器的原因。
如果不是IE，你仍然可以通过用鼠标选择并点击键而不用释放鼠标按钮来替换一堆文本。我想这可以通过检测鼠标按钮是否关闭来防止，并且在这种情况下阻止键盘操作。这将是你的功课; ）。
IE的代码也适用于可疑的div。

修改

看起来我也完成了your "homework"。

Answer 2

我知道您要禁用批量删除，但如果其他人想要不显示高亮颜色（其他元素为user-select: none），您可以将以下内容放入css中：

::selection { background: transparent }

这将使选择看起来像user-select: none，但它仍然允许大量删除。但它可能会让用户认为没有选择，所以他们可能不会批量删除。

希望这适合你，但主要是针对他人。

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

2 个答案: