html - 如何使 HTML5 contenteditable div 只允许 firefox 中的文本？

Question

我想制作具有仅允许文本的 contentEditable 属性的 div。使用 Chrome 可以轻松实现:

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

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

Answer 1

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

确保 contenteditable div 有 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/