Question

我想用contentEditable属性创建div，它只允许文本。使用以下功能可以在Chrome中轻松实现：

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

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

Answer 1

可悲的是，你做不到。由于此answer指出spec仅指定true，false和inherit作为有效参数。主题似乎是discussed但如果我没有弄错，只有Webkit实现对plaintext-only的支持。

Answer 2

我自己遇到了这个问题。这是我在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/rshb7cn5/3/

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

2 个答案: