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

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

确保contenteditable div具有css white-space: pre，pre-line或pre-wrap，以便将\n显示为新行。

覆盖“ enter”键，以便在我们键入时不会创建任何

或
标签

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);

}