Internet Explorer alternativo a document.execCommand ("insertText", ...), per l'inserimento del testo che può essere annullato/ripristinato dall'utente

Question

Quando l'utente modifica un contenteditable div e preme alcuni tasti, vorrei sovrascrivere il comportamento predefinito. Ad esempio, voglio inserire un'interruzione di linea normale quando l'utente preme INVIO. lo faccio usando document.execCommand("insertText",...)

Questo è l'unico modo che ho trovato finora per fare questa azione annullabile e ripristinabile dall'utente.

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

Questo codice funziona bene su chrome e firefox. Ma, ad esempio, non supporta "inserttext". Ci sarebbe un modo per inserire il testo con, ad esempio, in modo che l'utente possa annullare it?

Answer 1

IE 11 ha nuovi comandi ms-beginUndoUnit e ms-endUndoUnit.

Ho provato e non riuscito a creare una soluzione di lavoro per IE 11 utilizzando questi. L'inserimento di un'interruzione di riga è difficile con gli intervalli DOM e le selezioni; puoi farlo più facilmente in IE usando gli oggetti legacy document.selection e TextRange ma sfortunatamente IE 11 rimosso document.selection (ma non TextRange, stranamente) che lo rende difficile. Dopo aver programmato una brutta soluzione per creare un TextRange dalla selezione, l'annullamento non ha funzionato comunque. Ecco quello che ho fatto:

http://jsfiddle.net/E7sBD/2

ho deciso di avere un altro andare usando DOM Range e gli oggetti di selezione. Il codice di inserimento dell'interruzione di riga è illustrativo e non dovrebbe essere utilizzato per qualcosa di serio, perché comporta l'aggiunta di uno spazio non interrompente per dare il punto di inserimento da qualche parte (provare a posizionarlo direttamente dopo che lo <br> non funziona). L'annullamento rimuove il contenuto inserito ma sfortunatamente non sposta il cursore.

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

Answer 2

si può sempre andare il modo più semplice e più stabile per catturare l'evento di modifica sul div input e modificare l'ultimo carattere della stringa di input a proprio piacimento.

http://api.jquery.com/change è inventato penso a tal fine :)

Modifica il tuo angelo e si vede un intero nuovo mondo: 3