如何使HTML5 contenteditable div只允许在Firefox中的文本？

Question

我想用contentEditable属性创建div,它只允许文本.使用以下方法可以在Chrome中轻松实现:

<div contenteditable="plaintext-only"></div>

但它在Firefox中不起作用.有没有办法在Firefox中制作纯文本的contenteditable div？我知道这是可能的,因为Google Plus有这样的div,但我不知道他们是怎么做到的.

Answer 1

我自己也遇到了这个问题。这是我在 Firefox 和 Chrome 中测试过的解决方案：

确保contenteditablediv 具有 css white-space: pre，pre-line或者pre-wrap使其显示\n为新行。

覆盖“enter”键，以便当我们键入时，它不会创建任何<div>或<br>标签

myDiv.addEventListener("keydown", e => {
    //override pressing enter in contenteditable
    if (e.keyCode == 13)
    {
        //don't automatically put in divs
        e.preventDefault();
        e.stopPropagation();
        //insert newline
        insertTextAtSelection(myDiv, "\n");
    }
});

其次，重写粘贴事件以仅获取明文

//override paste
myDiv.addEventListener("paste", e => {
    //cancel paste
    e.preventDefault();
    //get plaintext from clipboard
    let text = (e.originalEvent || e).clipboardData.getData('text/plain');
    //insert text manually
    insertTextAtSelection(myDiv, text);
});

这里是支持函数，它将文本插入到 div 的 textContent 中，然后将光标返回到正确的位置。

function insertTextAtSelection(div, txt) {
    //get selection area so we can position insert
    let sel = window.getSelection();
    let text = div.textContent;
    let before = Math.min(sel.focusOffset, sel.anchorOffset);
    let after = Math.max(sel.focusOffset, sel.anchorOffset);
    //ensure string ends with \n so it displays properly
    let afterStr = text.substring(after);
    if (afterStr == "") afterStr = "\n";
    //insert content
    div.textContent = text.substring(0, before) + txt + afterStr;
    //restore cursor at correct position
    sel.removeAllRanges();
    let range = document.createRange();
    //childNodes[0] should be all the text
    range.setStart(div.childNodes[0], before + txt.length);
    range.setEnd(div.childNodes[0], before + txt.length);
    sel.addRange(range);
}

https://jsfiddle.net/1te5hwv0/

Answer 2

遗憾的是，您可以\xe2\x80\x99t。正如这个答案指出的那样，规范仅指定true,false和inherit作为有效参数。这个主题似乎已经讨论过了，但如果我没有记错的话，只有 Webkit 实现了对plaintext-only.

\n