Contenteditable erlaubt nur Klartext

Question

Ich versuche, eine contenteditable zu machen, die nur reinen Text akzeptiert.

Was ich will, ist zu hören, um Ereignis einfügen und dann entfernen Sie alle HTML-und fügen Sie es auf den Contentable nur als Nur-Text.

Um dies zu tun, habe ich bereits zwei verschiedene Ansätze ausprobiert, basierend auf Antworten auf ähnliche Fragen, aber diese beiden Ansätze haben Probleme.

Erstens: Dies nicht „Einfügen“ Hörer verwendet, anstatt für die Eingabe hört (nicht ideal für diesen Fall), dies war eine Lösung zu vermeiden Clipboard API verwenden.

Problem: Dies funktioniert gut auf Chrom aber nicht auf Firefox und IE, wenn Sie kopieren und fügen Sie den HTML es erfolgreich html und nur Einfügen von Text entfernt, aber wenn der Text zu schreiben, weiterhin wird die caret immer genommen bis zum Anfang der Zufriedenheit.

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

Sie können es versuchen, hier/Code auf dem ich zugrunde:http://jsbin.com/moruseqeha/edit?html,css,js,output

Zweitens: Da die erste ausgefallen und hören nicht auf „Einfügen“ Ereignis nur, ich Ich habe dann beschlossen, es mit zu versuchen. Das Problem hier ist, dass auf IE document.execCommand ("insertHTML", false, Text); scheint nicht zu funktionieren. Dies funktioniert auf Chrome, Firefox (getestet auf V41 und V42) und 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); 
}); 

Sie können es hier versuchen: http://jsfiddle.net/marinagon/461uye5p/

Kann mir jemand helfen, eine Lösung für einige dieser Probleme zu finden oder jemand eine bessere Lösung als die hier Beschenkten?

Ich bin mir bewusst, dass ich textarea verwenden konnte, aber ich habe Gründe, es nicht zu verwenden.

---

Update - Lösung gefunden

ich eine Lösung für den zweiten Ansatz gefunden. Seit document.execCommand ("insertHTML", false, text); funktioniert nicht auf IE Ich habe nach anderen Lösungen gesucht und diese https://stackoverflow.com/a/2925633/4631604 gefunden.

Hier können Sie zweite Ansatz mit Lösung funktioniert gut in allen Browsern sehen http://jsfiddle.net/marinagon/1v63t05q/

Answer 1

Verwenden Sie ein textarea Element anstelle eines contentEditable Element: _{^{(Hervorhebung von mir)}}

Das textarea Element darstellt eine mehrzeilige Nur-Text-Bearbeitung Steuerelement für den Rohwert des Elements.

Beispiel:

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

Answer 2

Schmutzige Hack die eingefügten Daten zu reinigen.

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