2013-11-21 6 views
10

Wenn der Benutzer eine contenteditable div editiert und einige Tasten drückt, möchte ich die Standardverhalten. Zum Beispiel möchte ich einen normalen Zeilenumbruch einfügen, wenn der Benutzer die EINGABETASTE drückt. Dies ist der einzige Weg, die ich gefunden habe, so weit zu machen, diese Aktion undoable und wiederherstellbaren vom Benutzer ich, dass document.execCommand("insertText",...)Internet Explorer Alternative zu document.execCommand ("insertText", ...), für Texteinfügung, die vom Benutzer rückgängig gemacht werden kann

verwenden.

<div id="editor" contenteditable="true" style="white-space:pre-wrap"> 
Some text.... 
</div> 

<script> 
$("#editor").keydown(function(evt){ 
    console.log(evt.keyCode); 
    if(evt.keyCode==13){ 
     document.execCommand("insertText",false,"\n"); 
     evt.preventDefault(); 
     evt.stopPropagation(); 
    } 
} 
</script> 

Dieser Code funktioniert gut auf Chrome und Firefox. Aber, dh "inserttext" wird nicht unterstützt. Würde es eine Möglichkeit geben, Text mit ie einzufügen, so dass der Benutzer rückgängig machen kann?

+0

, welche Versionen von IE tun um dich kümmern? IE 11 verfügt über Befehle zum Starten/Beenden undoable-action, frühere Versionen jedoch nicht. –

+0

@TimDown, jede Verbesserung im Vergleich zu meiner jetzigen Situation ist zu begrüßen :) Natürlich ist es besser, wenn es auch für alte Versionen funktioniert, dh ie11 ist besser als nichts. – Oli

+0

@TimDown, bitte posten Sie Ihre Antwort. Es wäre sehr hilfreich. – Oli

Antwort

7

IE 11 hat neue ms-beginUndoUnit und ms-endUndoUnit Befehle.

Ich versuchte und fehlgeschlagen, eine funktionierende Lösung für IE 11 mit diesen zu erstellen. Das Einfügen eines Zeilenumbrüchens ist schwierig mit DOM-Bereichen und -Auswahlmöglichkeiten. Sie können es leichter in IE mit seinen Legacy document.selection und TextRange Objekte tun, aber leider IE 11 entfernt document.selection (aber nicht TextRange, seltsam), die es schwierig macht. Nach dem Codieren einer fiesen Problemumgehung, um einen TextRange aus der Auswahl zu erstellen, funktionierte das Rückgängigmachen trotzdem nicht. Hier ist, was ich getan habe:

http://jsfiddle.net/E7sBD/2

entschied ich mich ein anderes zu haben, gehen mit DOM Bereich und Auswahlobjekte. Der Zeilenumbruch-Einfügecode ist illustrativ und sollte nicht für etwas Ernsthaftes verwendet werden, da ein Leerzeichen hinzugefügt werden muss, um das Caretzeichen irgendwohin zu geben (versuchen, es direkt zu platzieren, nachdem die <br> nicht funktioniert). Das Rückgängigmachen entfernt den eingefügten Inhalt, verschiebt den Caret jedoch leider nicht.

http://jsfiddle.net/E7sBD/4/

0

Sie können immer gehen der einfachen und stabilen Weg, um das Änderungsereignis am Eingang div und ändern Sie das letzte Zeichen aus der Eingabezeichenfolge nach Ihren Wünschen zu fangen.

http://api.jquery.com/change i zu diesem Zweck denken erfunden :)

Ändern Sie Ihr Engel und Sie sehen, eine ganz neue Welt: 3

+0

Ich habe diese Methode ausprobiert.Aber wenn ich Strg + Z mache, funktioniert es nicht mehr. – Oli

Verwandte Themen