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

有没有办法创建一个内容可编辑div，用户不能选择/突出显示内容，但仍然可以输入内容？我想创建一个界面，在这里用户被强制一个键一个键地删除和输入内容，而不能通过高亮显示进行大规模编辑

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

有什么想法吗

---

谢谢

如果您可以接受

文本区域

而不是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:

关于守则的一些意见：

• 在许多浏览器中，仅对

  表单中的
  输入
  或
  文本区域
  元素触发。这就是为什么HTML与您的HTML不同的原因

• IE9-10不支持

  selectionDirection

  ，这就是为什么IE的遗留事件处理模型也用于这些浏览器的原因
• 如果不是IE，你仍然可以用鼠标选择一堆文本并点击一个键而不释放鼠标按钮来替换它。我想这可以通过检测鼠标按钮是否按下来防止，在这种情况下，可以防止键盘动作。这将是你的家庭作业；）
• IE的代码也适用于contenteditable

  div

  s

---

编辑

---

看起来我也这么做了。

我知道你想禁用批量删除，但是如果其他人不想显示高亮颜色（对于其他元素，这将是

用户选择：无

），你可以在css中添加以下内容：

::selection { background: transparent }

这将使选择看起来像

user select:none

，但仍允许批量删除。但这可能会让用户认为没有选择，所以他们可能不会大规模删除

---

希望这对您有效，但主要对其他人有效。

您需要使用DOM来实现这种用途。我不认为CSS或HTML可以简单地做到这一点。为什么你想取消这样一个常见的和可访问的功能？我会诅咒，双重诅咒，然后三重诅咒一个对我做这种事的人，所以我只是好奇：谢谢你们的评论。我将研究较低级别的DOM控件和不可编辑的模型。我希望当有人写东西的时候，观众能够跟上——大规模的高亮删除和光标重新定位会让人很困惑。另外，我想促进有意识的写作，所以我试图限制作者的编辑能力。等我弄明白了，我会发回来的。别忘了这些都不是傻瓜的证据，任何想偷你短信的人都可以。任何webdev都可以禁用CSS/HTML/JS。他们也可以只查看或复制粘贴文本。@user2529253有任何评论吗？如果我选择了文本，但没有取消单击，而是写了一些东西，则可选择的文本仍在工作，并且文本已更改。@IagoMelanias使用.yes时，您无法选择任何文本，现在工作正常。我无法使用鼠标、ctrl+a和双击文本进行选择。伟大的非常感谢。

::selection { background: transparent }