更新 - 找到解决方案

Question

我正在努力使一个只接受纯文本的满足感。

我想要的是听取粘贴事件，然后删除所有html，并将其粘贴到唯一的纯文本上。

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

首先： 这个不使用“粘贴”监听器，而是监听输入（对于这种情况不太理想），这是避免使用Clipboard API的解决方案。

问题： 这在Chrome上工作正常但在Firefox和IE上没有，当你复制并粘贴html时，它成功地删除了html并且只粘贴了文本，但是在继续为了写文本，插入符号总是被带到了满足的开头。

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上测试）和edge。

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上不起作用，我搜索了另一个解决方案并找到了这个https://stackoverflow.com/a/2925633/4631604。

在这里，您可以看到解决方案在所有浏览器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>

Contenteditable仅允许纯文本

更新 - 找到解决方案

2 个答案: