5

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

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

有任何想法吗？

谢谢

4

2 回答 2

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 的代码也适用于 contenteditable div。

编辑

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

于 2013-09-24T19:01:22.780 回答
1

我知道你想禁用批量删除，但如果其他人不想显示突出显示颜色（这将user-select: none用于其他元素），你可以在你的 css 中输入以下内容：

::selection { background: transparent }

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

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

于 2017-07-03T00:46:33.980 回答