Il cursore di Firefox invisibile, diventa visibile quando si fa clic su qualsiasi altra cosa

Question

Ho il bug più strano che abbia mai incontrato e sono vicino alla fine del mio spirito su questo. Chiunque abbia idee su come eseguire il debug di questo (o qualsiasi soluzione intelligente) sarebbe fantastico.

Il problema:

Sto facendo un editor WYSIWYG semplice in Firefox utilizzando contenteditable. Il problema appare quando carico il testo da modificare tramite ajax. Prima del caricamento, il cursore appare a posto (per una frazione di secondo) e una volta caricato il testo scompare. Puoi ancora inserire il testo, e il cursore è sicuramente ancora "lì" (una casella di stato mostra la linea/colonna corrente bene), ma il cursore non è visibile e la sovrapposizione di selezione non appare.

Ecco cosa rende questo davvero strano: facendo clic IN QUALUNQUE luogo, su qualsiasi altro elemento dom, su firebug, anche su un'altra finestra, il cursore torna e si comporta come normale. Infatti, l'unica volta in cui il cursore ha qualche problema è all'inizio, quando inizialmente si carica la pagina o si aggiorna. Fare clic in qualsiasi punto all'interno del div contentedtiable non lo risolve - devi fare clic all'esterno per farlo aggiornare.

In questo momento, ho solo bisogno di una soluzione alternativa. Ho provato 500 sapori di $ (someelement) .click o $ (somelement) .focus, ma non replicano completamente un clic "effettivo" da un utente.

Qualcuno ha mai visto qualcosa di simile? Grazie.

Answer 1

Beh, non ho trovato che cosa sta causando il problema, ma ho trovato una soluzione rapida-and-dirty fa il trucco. Applico semplicemente un tag di ancoraggio al DOM, lo focalizzo (usando jQuery .focus), quindi lo rimuovo.

Ho provato .focus molte volte prima, ma l'ho sempre provato su elementi div o li, che non hanno fatto il trucco. Deve essere un tag di ancoraggio. Sospetto che sia perché il tag di ancoraggio ha effettivamente qualche componente visibile al suo focus, che resetta qualcosa nel meccanismo di visualizzazione del cursore interno di firefox.

In entrambi i casi, se stai cercando di risolvere problemi come questo e questo non risolve il problema, guarda la spiegazione di MorganTiley - potrebbe darti dei buoni consigli.

Answer 2

Questo perché quando si carica il contenuto, si modifica la struttura dei nodi html e quindi si annulla la selezione (un cursore è solo una selezione compressa). Ti consiglio di provare a reimpostarlo tramite Rangy. Funziona bene in combinazione con jquery. Usa jquery per ottenere il primo elemento nell'area contentEditable, ad es. il primo paragrafo, quindi crea una nuova gamma di rangy e seleziona quel paragrafo (nodo) e collassa per iniziare. Questo metterà il cursore all'inizio del tuo contenuto. Ecco un po 'di codice di massima

$(document).ready(function() { 
    //init rangy 
}); 

function ajaxLoaded { 
    var p = $(".contenteditablediv p:first")[0]; 
    var sel = rangy.getSelection(); 
    sel.collapse(p, 0); 
}