Contenteditable allowing only plain text [duplicate]

Question

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

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.

First: This one isn't using "paste" listener, is instead listening for input (not ideal for this case), this was a solution to avoid using Clipboard API.

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); }); 

You can try it here/code on which I based: http://jsbin.com/moruseqeha/edit?html,css,js,output

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); }); 

You can try it here: 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?

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

Answer 1

Dirty hack to clean the pasted data.

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

Answer 2

Use a textarea element instead of a contentEditable element: _{^{(emphasis mine)}}

The textarea element represents a multiline plain text edit control for the element's raw value.

Example:

/* 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>