相关疑难解决方法(0)

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

我想要的是听取粘贴事件,然后删除所有的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,但我有理由不使用它. …