Kursor Firefox jest niewidoczny, staje się widoczny po kliknięciu czegokolwiek innego.

Question

Mam absolutnie najdziwniejszy błąd, jaki kiedykolwiek spotkałem, a na tym kończę dowcip. Każdy, kto ma pomysły na debugowanie tego (lub jakikolwiek sprytny sposób obejścia tego problemu) będzie niesamowity.

Problem:

Robię prosty edytor WYSIWYG w Firefoksie za pomocą contenteditable. Problem pojawia się, gdy ładuję tekst do edycji przez ajax. Przed załadowaniem kursor wydaje się być w porządku (przez ułamek sekundy), a po załadowaniu tekstu znika. Nadal można wprowadzać tekst, a kursor jest zdecydowanie "tam" (okno statusu pokazuje bieżącą linię/col, ale nie jest widoczna, a nakładka wyboru nie pojawia się.

Oto, co czyni to naprawdę dziwnym: kliknięcie GDZIEKOLWIEK, na dowolnym elemencie domowym, na firebugie, nawet w innym oknie - powoduje powrót kursora i zachowanie się jak zwykle. W rzeczywistości jedyną sytuacją, w której kursor ma jakiekolwiek problemy, jest na samym początku, podczas początkowego ładowania strony lub odświeżania. Kliknięcie w dowolnym miejscu wewnątrz elementu contentedtiable div go nie naprawia - musisz kliknąć na zewnątrz, aby odświeżyć.

W tej chwili potrzebuję obejścia. Wypróbowałem 500 smaków $ (someelement) .click lub $ (somelement) .focus, ale nie w pełni replikują "rzeczywiste" kliknięcia od użytkownika.

Czy ktoś widział coś takiego wcześniej? Dzięki.

Answer 1

Nie udało mi się ustalić, co jest przyczyną problemu, ale znalazłem szybką i brudną poprawkę. Dodaję znacznik zakotwiczenia do DOM, koncentruję go (używając jQuery .focus), a następnie usuwam.

Próbowałem .focus wiele razy wcześniej, ale zawsze próbowałem go na div lub li elementów, które nie dało rady. Musi to być znacznik zakotwiczenia. Podejrzewam, że tak jest, ponieważ znacznik zakotwiczenia ma faktycznie jakiś widoczny komponent, który resetuje coś w wewnętrznym mechanizmie wyświetlania kursora firefox.

Tak czy inaczej, jeśli próbujesz rozwiązać takie problemy, a to nie rozwiązuje problemu, spójrz na wyjaśnienie MorganTiley - które może dać ci dobre wskazówki.

Answer 2

Dzieje się tak, ponieważ po załadowaniu treści zmienia się struktura węzłów HTML i tym samym unieważnia zaznaczenie (kursor jest tylko zwiniętym zaznaczeniem). Zalecam spróbować zresetować go poprzez Rangy. Działa dobrze w połączeniu z jquery. Użyj jquery, aby uzyskać pierwszy element w obszarze contentEditable, np. pierwszy akapit, a następnie wprowadź nowy zakres i wybierz ten akapit (węzeł) i zwinąć, aby rozpocząć. Spowoduje to umieszczenie kursora na samym początku treści. Oto trochę przybliżony kod:

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

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