Contenteditable只允许纯文本 [英] Contenteditable allowing only plain text

问题描述

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

I'm trying to make a contenteditable that only accepts plain text.

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

What I want is to listen to paste event and then remove all html and paste it on the contenteditable only as plain text.

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

In order to do that I've already tried two different approachs, based answers to similar questions, but those two approachs have problems.

第一个：
这个不使用粘贴监听器，而是监听输入（对于这种情况不太理想），这是一个避免使用剪贴板API 。

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

Problem: This works fine on chrome but not on firefox and IE, when you copy and paste the html it sucessfully removes html and only paste text, but when continuing to write text, the caret is always taken to the beginning of the 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上测试）和edge。

Second: Since the first one failed and isn't listening to "paste" event only, I've then decided to give it a try using Clipboard API. The problem here is that on IE document.execCommand("insertHTML", false, text); doesn't seem to work. This works on chrome, firefox (tested on v41 and v42) and 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/

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

Can anyone help me find a solution for some of this problems or anyone has a better solution than the ones presented here?

我知道我可以使用textarea，但我有理由没有使用它。

I'm aware that I could use textarea, but I have reasons not to use it.

我找到了第二种方法的解决方案。
由于 document.execCommand（insertHTML，false，text）; 在IE上不起作用我搜索了另一个解决方案，发现这个https://stackoverflow.com/a/2925633/4631604 。

I found a solution for the second approach. Since document.execCommand("insertHTML", false, text); doesn't work on IE I've searched for another solutions and found this one https://stackoverflow.com/a/2925633/4631604.

在这里你可以看到第二种方法，解决方案在所有浏览器中都能正常工作 http://jsfiddle.net/marinagon/1v63t05q/

Here you can see second approach with solution working fine in all browsers http://jsfiddle.net/marinagon/1v63t05q/

推荐答案

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

Dirty hack to clean the pasted data.

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

这篇关于Contenteditable只允许纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！