Question

我正在尝试创建 HTML5 contenteditable div，它只接受纯文本。我在下面使用html和jQuery：

HTML

<div contenteditable="true"></div>

的jQuery

(function () {
   $('[contenteditable]').on('paste', function (e) {
     e.preventDefault();
     var text = null;
     text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here');
     document.execCommand("insertText", false, text);
   });
 });

但它并不适用于所有浏览器。 Internet Explorer浏览器中不支持getData。我尝试了很多关于stackoverflow的解决方案，但没有一个对我有用。

我也试过

(function () {
  $('[contenteditable]').on('paste', function (e) {
    e.preventDefault();
    var text = null;

    if (window.clipboardData && clipboardData.setData) {
      text = window.clipboardData.getData('text');
    } else {
      text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here');
    }
    document.execCommand("insertText", false, text);
  });
});

但在这种情况下，document.execCommand("insertText", false, text);不适用于IE。

是否有任何方法可以在过滤HTML标记后接受数据，因此任何人都可以通过类型，粘贴，删除或任何其他方式在可编辑的div中输入数据。它应该显示为文本。

Answer 1

不是jQuery的忠实粉丝，我的解决方案不会使用它。无论如何它在这里（它应该工作，作为纯javascript）：

function convertToPlaintext() {
  var textContent = this.textContent;
  this.innerHTML = "";
  this.textContent = textContent;
}

var contentEditableNodes = document.querySelectorAll('[contenteditable]');

[].forEach.call(contentEditableNodes, function(div) {
  div.addEventListener("input", convertToPlaintext, false);
});

Answer 2

试试这个：

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

参考：https://w3c.github.io/editing/contentEditable.html#h-contenteditable

Answer 3

在@humanityANDpeace答案的启发下，我想到了这一点：

function convertToPlaintext() {
  this.innerHTML = this.innerText.replace(/(?:\r\n|\r|\n)/g, '<br>');
  this.focus();
  document.execCommand('selectAll', false, null);
  document.getSelection().collapseToEnd();}

由…呼叫：

ele.addEventListener("input", convertToPlaintext, false);

其中“ ele”是您的contentEditable div。这将用<br>替换任何换行符，并在您键入时将光标保持在文本的末尾。我的主要动机是替换所有“ contentEditable”添加的div标签，但仍保留换行符。

“替换换行符”来自：https://stackoverflow.com/a/784547/2677034

HTML5 contenteditable div只接受明文

3 个答案: