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.

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.

• javascript
• jquery
• html

• Look at using this concept: $('<p>Hi, I\'m <abbr title="Hypertext Markup Language">HTML</abbr></p>').text();. That should give you Hi, I'm HTML. – Chris Peters Commented Jun 25, 2014 at 12:05
• 1 My comment covers the "convert it to plain text" part. I don't have any experience working with the JavaScript API for what you're trying to do, but as I read the question, I have trouble understanding what you're having trouble with. For example, is "now working for IE" supposed to read as, "not working for IE?" – Chris Peters Commented Jun 25, 2014 at 13:18
• 5 Just add contendeditable='plaintext-only' – Dustin Scott Commented Aug 7, 2014 at 15:15
• 5 Unfortunately contenteditable='plaintext-only' seems to be a webkit-only feature. – geo Commented Jan 14, 2015 at 9:44
• 1 plaintext-only might hopefully be standardized one day: github.com/w3c/editing/issues/162 – BenMorel Commented Aug 31, 2018 at 23:45

3 Answers 3

Try this:

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

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

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.

In inspired by @humanityANDpeace answer, I came up with this:

function convertToPlaintext() {
  this.innerHTML = this.innerText.replace(/(?:\r\n|\r|\n)/g, '<br>');
  this.focus();
  document.execCommand('selectAll', false, null);
  document.getSelection().collapseToEnd();}

called by:

ele.addEventListener("input", convertToPlaintext, false);

where 'ele' is your contentEditable div. This will replace any line breaks with <br> and keep the cursor at the end of text as you type. My primary motive was to replace all div tags that 'contentEditable' adds but still retain line breaks.

The 'replace line breaks' came from:https://stackoverflow.com/a/784547/2677034