Znajduję mnóstwo dobrych, crossbrowserowych odpowiedzi na temat tego, jak USTAWIĆ pozycję indeksu kursora lub daszka w contentEditable
elemencie, ale nie ma żadnych, jak GET lub znaleźć jego indeks ...
Chcę tylko poznać indeks karetki w tym div keyup
.
Tak więc, kiedy użytkownik wpisuje tekst, mogę w dowolnym momencie poznać indeks jego kursora w contentEditable
elemencie.
EDYCJA: Szukam INDEKSU w treści div (tekst), a nie współrzędnych kursora.
<div id="contentBox" contentEditable="true"></div>
$('#contentbox').keyup(function() {
// ... ?
});
<a>
elementu wewnątrz elementu<div>
, jakie przesunięcie chcesz w takim razie? Przesunięcie w tekście wewnątrz znaku<a>
?Odpowiedzi:
Poniższy kod zakłada:
<div>
i nie ma innych węzłówwhite-space
właściwości CSS ustawionej napre
Jeśli potrzebujesz bardziej ogólnego podejścia, które będzie działać z zawartością z zagnieżdżonymi elementami, wypróbuj tę odpowiedź:
https://stackoverflow.com/a/4812022/96100
Kod:
źródło
<a>
elementu wewnątrz elementu<div>
, jakie przesunięcie chcesz w takim razie? Przesunięcie w tekście wewnątrz znaku<a>
?keyup
prawdopodobnie będzie to niewłaściwe wydarzenie, ale zostało użyte w pierwotnym pytaniu.getCaretPosition()
samo w sobie jest w porządku w ramach własnych ograniczeń.<br>
lub<div>
, co narusza pierwsze założenie wymienione w odpowiedzi. Jeśli potrzebujesz nieco bardziej ogólnego rozwiązania, możesz wypróbować stackoverflow.com/a/4812022/96100Kilka zmarszczek, których nie widzę w innych odpowiedziach:
Oto sposób na uzyskanie pozycji początkowej i końcowej jako przesunięć względem wartości textContent elementu:
źródło
źródło
Spróbuj tego:
Caret.js Uzyskaj pozycję daszka i przesunięcie z pola tekstowego
https://github.com/ichord/Caret.js
demo: http://ichord.github.com/Caret.js
źródło
contenteditable
li
po kliknięciu przycisku w celu zmiany nazwyli
treści.Trochę późno na imprezę, ale na wypadek, gdyby ktoś inny walczył. Żadne z wyszukiwań Google, które znalazłem w ciągu ostatnich dwóch dni, nie przyniosło niczego, co działa, ale wymyśliłem zwięzłe i eleganckie rozwiązanie, które zawsze będzie działać niezależnie od liczby zagnieżdżonych tagów:
Zaznacza całą drogę z powrotem do początku akapitu, a następnie zlicza długość ciągu, aby uzyskać bieżącą pozycję, a następnie cofa zaznaczenie, aby przywrócić kursor do bieżącej pozycji. Jeśli chcesz to zrobić dla całego dokumentu (więcej niż jednego akapitu), zmień
paragraphboundary
nadocumentboundary
lub jakąkolwiek szczegółowość dla swojego przypadku. Sprawdź interfejs API, aby uzyskać więcej informacji . Twoje zdrowie! :)źródło
<div contenteditable> some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text </div>
Zawsze umieszczam kursor przedi
tagiem lub jakikolwiek podrzędny element html wewnątrzdiv
, pozycja kursora zaczyna się od 0. Czy istnieje sposób na uniknięcie tej liczby ponownych uruchomień?źródło
Ten działa dla mnie:
Linia wywołująca zależy od typu zdarzenia, w przypadku kluczowych zdarzeń użyj tego:
dla zdarzenia myszy użyj tego:
w tych dwóch przypadkach zwracam uwagę na linie przerwania, dodając indeks docelowy
źródło
Uwaga: sam obiekt zakresu może być przechowywany w zmiennej i można go ponownie wybrać w dowolnym momencie, chyba że zmieni się zawartość edytowalnego elementu div.
Odniesienie do IE 8 i starszych: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx
Odniesienie do standardów (wszystkich innych) przeglądarek: https://developer.mozilla.org/en/DOM/range (to dokumentacja Mozilla, ale kod działa również w Chrome, Safari, Opera i IE9)
źródło
Range
Obiekt zwrócony przez większość przeglądarek orazTextRange
obiekt zwrócony przez IE są bardzo różne rzeczy, więc nie jestem pewien, że to odpowiedź rozwiązuje wiele.Ponieważ zajęło mi to wieczność, aby dowiedzieć się, korzystając z nowego interfejsu API window.getSelection, które zamierzam udostępnić dla potomności. Zwróć uwagę, że MDN sugeruje szersze wsparcie dla window.getSelection, jednak Twój przebieg może się różnić.
Oto jsfiddle, który uruchamia się po włączeniu klucza . Należy jednak pamiętać, że szybkie naciśnięcia klawiszy kierunkowych, a także szybkie usuwanie wydaje się być pomijaniem zdarzeń.
źródło
Prosty sposób, który iteruje przez wszystkie elementy chidren edytowalnego elementu div, aż dotrze do endContainer. Następnie dodaję przesunięcie kontenera końcowego i mamy indeks znaków. Powinien działać z dowolną liczbą zagnieżdżeń. używa rekurencji.
Uwaga: do obsługi np. Wymagane jest wypełnienie poliamidowe
Element.closest('div[contenteditable]')
https://codepen.io/alockwood05/pen/vMpdmZ
źródło