HTML5 contenteditable div accept only plaintext

Question

I'm trying to create a HTML5 contenteditable div, which only accept a plain text. I'm using html and jQuery below:

HTML

<div contenteditable="true"></div>

jQuery

(function () {
   $('[contenteditable]').on('paste', function (e) {
     e.preventDefault();
     var text = null;
     text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here');
     document.execCommand("insertText", false, text);
   });
 });

But it's not working for all browsers. getData not support in Internet Explorer browser. I tried a lot of solutions mention here on stackoverflow, But none worked for me.

I also tried

(function () {
  $('[contenteditable]').on('paste', function (e) {
    e.preventDefault();
    var text = null;

    if (window.clipboardData && clipboardData.setData) {
      text = window.clipboardData.getData('text');
    } else {
      text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste Your Text Here');
    }
    document.execCommand("insertText", false, text);
  });
});

But in that case document.execCommand("insertText", false, text); is not working for IE.

Is there any way to make it possible to accept data after filter HTML tags, So that anyone enters data in editable div by type, paste, drop, or any other way. It should display it as text.

Answer 1

Try this:

<div contenteditable="plaintext-only"></div>

Reference: https://w3c.github.io/editing/contentEditable.html#h-contenteditable

Answer 2

Being not a big fan of jQuery, my solution will not make any use of it. Anyway here it goes (it should anyway work, as pure javascript):

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

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

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

<div contenteditable="true" style="border: dashed 1px grey">Editable</div>

Note that this solution is severely limited in that the caret will typically jump to the start of the text on every input event.