Contenteditable只允许纯文本

Question

我试图让一个只接受纯文本的满足者.

我想要的是听取粘贴事件,然后删除所有的HTML并将其粘贴到contenteditable上仅作为纯文本.

为了做到这一点,我已经尝试了两种不同的方法,基于类似问题的答案,但这两种方法都存在问题.

第一: 这个没有使用"粘贴"监听器,而是监听输入(对于这种情况不太理想),这是避免使用Clipboard API的解决方案.

问题:这在chrome上工作正常,但在firefox和IE上没有,当你复制并粘贴html时,它成功地删除了html并且只粘贴了文本,但是当继续写文本时,插入符始终被带到了contenteditable的开头.

function convertToPlaintext() {
  var textContent = this.textContent;
  this.textContent = textContent;
}

var contentEditableNodes = document.querySelectorAll('.plaintext[contenteditable]');

[].forEach.call(contentEditableNodes, function(div) {
  div.addEventListener("input", convertToPlaintext, false);
});

您可以在这里尝试/我所基于的代码: http ://jsbin.com/moruseqeha/edit？html,css,js,output

第二: 由于第一个失败并且没有只听"粘贴"事件,我决定尝试使用Clipboard API.这里的问题是IE上的document.execCommand("insertHTML",false,text); 似乎不起作用.这适用于chrome,firefox(在v41和v42上测试)和边缘.

document.querySelector(".plaintext[contenteditable]").addEventListener("paste", function(e) {
  e.preventDefault();
  var text = "";
  if (e.clipboardData && e.clipboardData.getData) {
    text = e.clipboardData.getData("text/plain");
  } else if (window.clipboardData && window.clipboardData.getData) {
    text = window.clipboardData.getData("Text");
  }
  document.execCommand("insertHTML", false, text);
});

你可以在这里试试:http://jsfiddle.net/marinagon/461uye5p/

任何人都可以帮助我找到解决这些问题的解决方案,或者任何人都有比这里提出的解决方案更好的解决方案？

我知道我可以使用textarea,但我有理由不使用它.

---

更新 - 找到解决方案

我找到了第二种方法的解决方案.自document.execCommand("insertHTML",false,text); 不适用于IE我已经搜索了另一个解决方案,发现这个/sf/answers/204794341/.

在这里你可以看到第二种方法,解决方案在所有浏览器中运行良好http://jsfiddle.net/marinagon/1v63t05q/

Answer 1

肮脏的黑客来清理粘贴的数据.

function onpaste(e, el){
      setTimeout(function(){
            el.innerText = el.innerText;
        }, 10);
}

Answer 2

使用textarea元素而不是 contentEditable 元素：（_{^{强调我的）}}

该textarea元素代表一个多纯文本编辑控件为元素的原始值。

例子：

/* Auto resize height */
var textarea = document.querySelector('textarea');
(textarea.oninput = function() {
  textarea.style.height = 0;
  textarea.style.height = textarea.scrollHeight + 'px';
})();

textarea { width: 100%; }

<textarea>Hello! You can edit my content. But only plain-text!!!</textarea>