Firefox-Cursor unsichtbar, wird sichtbar, wenn Sie auf etwas anderes klicken

Question

Ich habe den absolut seltsamsten Fehler, den ich jemals erlebt habe, und ich bin in der Nähe meines Witzes Ende auf diesem. Jeder mit Ideen, wie dies zu debuggen ist (oder irgendwelche cleveren Workarounds) wäre großartig.

Das Problem:

Ich bin ein einfaches WYSIWYG-Editor in Firefox contenteditable machen. Das Problem tritt auf, wenn ich den zu bearbeitenden Text über Ajax lade. Vor dem Laden erscheint der Cursor fein (für einen Sekundenbruchteil), und sobald der Text geladen ist, verschwindet er. Sie können immer noch Text eingeben, und der Cursor ist definitiv immer noch "da" (ein Statusfeld zeigt die aktuelle Zeile/Spalte an), aber der Cursor ist nicht sichtbar und das Auswahl-Overlay erscheint nicht.

Hier ist, was dies wirklich seltsam macht: Klicken Sie anywhere, auf einem anderen dom-Element, auf firebug, auch in einem anderen Fenster - macht den Cursor zurück und verhalten sich wie normal. In der Tat ist der einzige Zeitpunkt, an dem der Cursor irgendwelche Probleme hat, ganz am Anfang, wenn die Seite anfänglich geladen oder aktualisiert wird. Durch Klicken auf eine beliebige Stelle innerhalb des zufrieden stellenden Divs wird es nicht repariert - Sie müssen außerhalb klicken, damit es aktualisiert wird.

Gerade jetzt, ich brauche nur einen Workaround. Ich habe 500 Varianten von $ (irgendein Element) .click oder $ (irgendein Element) .focus ausprobiert, aber sie replizieren einen "tatsächlichen" Klick von einem Benutzer nicht vollständig.

Hat jemand schon einmal so etwas gesehen? Vielen Dank.

Answer 1

Nun, ich habe nicht herausfinden, was das Problem verursacht, aber ich fand eine schnelle und unsaubere Fix funktioniert der Trick. Ich füge einfach ein Anchor-Tag an das DOM an, fokussiere es (mit jQuery .focus) und entferne es dann.

Ich versuchte .focus viele Male vorher, aber ich versuchte es immer auf div oder li Elementen, die den Trick nicht taten. Es muss ein Anker-Tag sein. Ich vermute, dass es daran liegt, dass das Anchor-Tag tatsächlich eine sichtbare Komponente zu seinem Fokus hat, was etwas in firefox's internem Cursor-Anzeigemechanismus zurücksetzt.

So oder so, wenn Sie versuchen, Probleme wie diese zu lösen und dies nicht beheben, schauen Sie sich MorganTiley's Erklärung an - das könnte Ihnen ein paar gute Anhaltspunkte geben.

Answer 2

Dies ist, weil Sie beim Laden des Inhalts die Struktur der HTML-Knoten ändern und somit die Auswahl ungültig machen (ein Cursor ist nur eine minimierte Auswahl). Ich empfehle, es über Rangy zurücksetzen. Es funktioniert gut in Kombination mit jQuery. Verwenden Sie jquery, um das erste Element in Ihrem contentEditable-Bereich abzurufen, z. der erste Absatz, dann einen neuen Rangy-Bereich und wählen Sie diesen Absatz (Knoten) und Kollaps zum Starten. Dies bringt den Cursor ganz am Anfang Ihres Inhalts. Hier einige grobe Code

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

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