防止在可编辑div中选择/高亮文本

Question

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

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

有什么建议吗？

谢谢

- Eugene

---

你需要使用DOM来进行那种用法。我认为CSS或HTML并不能简单地做到这一点。 - MahanGM

你为什么想要拿走这样一个常见且易于访问的功能呢？如果有人这样对我做，我会诅咒他一次、两次甚至三次，所以只是好奇 :D - Zathrus Writer

https://dev59.com/pnRA5IYBdhLWcg3wyRF6 - Chad

谢谢大家的评论。我会研究更低级别的DOM控制和非contenteditable模型。我希望观众能够跟随某人写作时进行-大量高亮删除和光标重新定位会令人困惑。此外，我想促进意识流写作，因此我正在尝试限制作者的编辑能力。我会在弄清楚后再回来发布。 - Eugene

不要忘记这些并不是白痴证明的，任何想窃取你的文本的人都可以。任何网络开发人员都可以禁用你的CSS/HTML/JS。他们也可以只查看源代码并复制粘贴文本。 - TravisO

@TravisO 看起来 OP 并不是试图防止复制页面内容，而是要防止对特定元素进行过快/过大的更改。 - Teemu

Answer 1

我知道你想禁用批量删除，但如果其他人不想显示高亮颜色（即其他元素的 user-select: none），你可以在CSS中添加以下内容：

::selection { background: transparent }

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

希望这对你有用，但主要是针对其他人。

- Cameron

Answer 2

如果您可以接受使用textarea而不是contenteditablediv，您可以尝试以下方法：

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 只对 form 中的 input 或 textarea 元素触发。这就是与你的 HTML 不同的原因。
• IE9 - 10 不支持 selectionDirection，因此这些浏览器也使用 IE 的传统事件处理模型。
• 如果不是 IE，您仍然可以通过用鼠标选择文本并按下键盘上的一个键（而不释放鼠标按钮）来替换一堆文本。我认为可以通过检测鼠标按钮是否按下，并在这种情况下防止键盘操作来解决这个问题。这将是你的作业 ; )。
• IE 的代码也适用于可编辑的 div。

---

编辑

看起来我也做了你的“作业”。

- Teemu

---

@user2529253 有什么评论吗？ - Teemu

如果我选择文本但不取消选择，然后输入一些内容，可选择的文本仍然有效并且文本会被更改。 - Iago

@IagoMelanias 当使用“作业代码”(http://jsfiddle.net/5xrqv/3/)时，无法选择任何文本。 - Teemu

没错，现在它完美地工作了。我无法使用鼠标、ctrl+a和双击文本进行选择。太好了。谢谢你。 - Iago