contentEditable + selectAll: Firefox non permetterà l'input da tastiera sui contenuti generati dinamicamente

Question

Sto avendo un problema in Firefox (altri browser sembrano funzionare bene) con elementi generati in modo dinamico contenente un attributo contenteditable="true":

Se selectAll (sia dinamicamente che con il mio mouse), Firefox non consente l'input da tastiera.

Si prega di consultare il mio jsFiddle Example per riferimento. Questo sembra avere effetto solo su Firefox.

$(document).ready(function(){ 
$('.edit').live('dblclick', function() { 
    document.execCommand('selectAll',false,null); 
}); 

$('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>'); 
}); 

EDIT: Ecco l'applicazione effettiva su cui sto lavorando (pardon la polvere): cr8.me/app/ff.html - Quello che sto volendo è fare clic su (doppio clic per selezionare tutto il testo) di una nota, Categoria o titolo del piano per modificarlo. Funziona per chiunque? Forse è solo la mia configurazione - o script poveri. Le linee 137, 572 sono rilevanti.

Answer 1

Apparentemente Firefox ha problemi con contenteditable su arco elementi (Sto assumendo che è il caso di altro display : inline elementi, anche se non ho provato). Il problema può essere risolto semplicemente con sostituendo gli intervalli con i div. Inoltre, i div possono avere la proprietà "display: inline" su di essi usando css e funzionano ancora bene.

Controllare qui l'esempio di lavoro: http://jsfiddle.net/6sTJh/5/. Il pulsante con l'etichetta "Aggiungi bug" aggiunge dinamicamente un intervallo con contenteditable e non funziona come previsto, mentre il pulsante "Aggiungi lavoro" aggiunge div con l'attributo contenteditable e funziona perfettamente.

Così è la tua app - quando ho sostituito tutti gli span contenteditable con div, il montaggio funziona perfettamente con firefox 3.6 e firefox 6.0.

nota laterale: Per quanto riguarda il codice dell'applicazione - non utilizzare lo stesso id su più nodi (come si sta facendo con lo stesso ID "nota-title" su ogni nota) oppure è possibile ottenere comportamenti imprevisti da vari browser.

La regola generale è che è possibile avere un solo elemento con un determinato ID su una pagina. Utilizzare classe per "raggruppare" più di un elemento e selezionarli in seguito.