contenteditable div nur akzeptieren Klartext

Question

Ich versuche, ein HTML5 contenteditable div zu erstellen, die nur einen einfachen Text akzeptieren. Ich verwende HTML und jQuery unter:

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

Aber es ist nicht für alle Browser arbeiten. getData nicht im Internet Explorer-Browser unterstützt. Ich habe versucht viele Lösungen hier auf Stackoverflow zu erwähnen, aber keiner hat für mich funktioniert.

Ich habe auch versucht

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

Aber in diesem Fall document.execCommand("insertText", false, text); funktioniert nicht für den Internet Explorer.

Gibt es eine Möglichkeit, es möglich zu machen, zu akzeptieren Daten nach Filter HTML-Tags, so dass jeder Daten in editierbare div nach Typ betritt, Paste, Tropfen, oder jede andere Art und Weise. Es sollte es als Text anzeigen.

Answer 1

Da kein großer Fan von jQuery, meine Lösung keinen Gebrauch davon machen. Wie dem auch sei, hier geht es (es sollte auf jeden Fall arbeiten, als reine 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); 
 
});

Answer 2

Try this:

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

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