Crea una invece di premendo Invio su contenteditable

Ho scritto un po ‘di codice nel gestore di eventi della tastiera per inserire un
in risposta alla stampa del tasto Invio:

 event.preventDefault(); document.execCommand('InsertHTML', true, '
');

Funziona solo se il cursore si trova tra due lettere, se alla fine ho bisogno di due elementi. Posso rilevare se sono alla fine di una linea? O qualche altra idea di lavoro per il problema di invio?

Ho anche provato a catturare il normale evento-chiave (senza premere il tasto ctrl) e creare un evento-tastiera con JS in cui il tasto Invio viene premuto insieme al ctrl. Ma questo non funziona …

Deve funzionare solo in Webkit / Safari …

Per risolvere il tuo problema, tieni sempre un elemento br come ultimo elemento del tuo divento contenteditable. Ciò garantirà un comportamento prevedibile quando si inserisce un elemento br rispetto al browser predefinito per l’iniezione di elementi div. Puoi controllare the lastChild su keyup e mouseup per assicurarti che sia un elemento br. Supponendo che tu abbia un documento come:

 

Puoi usare il seguente JavaScript (con jQuery 1.4+) per mantenere un elemento br come ultimo elemento e iniettare un elemento br invece di div div:

 $(function(){ $("#editable") // make sure br is always the lastChild of contenteditable .live("keyup mouseup", function(){ if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") { this.appendChild(document.createChild("br")); } }) // use br instead of div div .live("keypress", function(e){ if (e.which == 13) { if (window.getSelection) { var selection = window.getSelection(), range = selection.getRangeAt(0), br = document.createElement("br"); range.deleteContents(); range.insertNode(br); range.setStartAfter(br); range.setEndAfter(br); range.collapse(false); selection.removeAllRanges(); selection.addRange(range); return false; } } }); }); 

Testato su Apple OS X con Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Prova a utilizzare ierange per farlo funzionare in Windows Internet Explorer.

Assocerei una funzione all’evento keyup per eliminare e passare a
usando regEx. Quindi, anche se crea uno strano markup, verrà risolto.

Usando jQuery:

 $('.myEditable').keyup(function(){ var sanitazed = $(this).text().replace(/
/g, '').replace(/< \/div[^<]*?>/g, '
'); $(this).text(sanitazed); });