Mam ten prosty kod HTML jako przykład:
<div id="editable" contenteditable="true">
text text text<br>
text text text<br>
text text text<br>
</div>
<button id="button">focus</button>
Chcę prostej rzeczy - kiedy klikam przycisk, chcę umieścić kursor (kursor) w określonym miejscu w edytowalnym div. Podczas wyszukiwania w Internecie mam JS dołączony do kliknięcia przycisku, ale to nie działa (FF, Chrome):
var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);
Czy możliwe jest ręczne ustawienie pozycji karetki w ten sposób?
setSelectionRange()
funkcji z odpowiedzi, którą tu napisałem: stackoverflow.com/questions/6240139/… . Jak zauważyłem w odpowiedzi, istnieją różne rzeczy, z którymi nie poradzi sobie poprawnie / konsekwentnie, ale może być wystarczająco dobry.document.createRange
(lubwindow.getSelection
, ale nie zajdzie tak daleko).Większość odpowiedzi na temat pozycjonowania kursora, które można zadowalać, jest dość uproszczona, ponieważ uwzględnia tylko dane wejściowe z prostym tekstem waniliowym. Gdy użyjesz elementów HTML w kontenerze, wprowadzony tekst zostaje podzielony na węzły i swobodnie rozłożony w strukturze drzewa.
Aby ustawić pozycję kursora, mam tę funkcję, która zapętla wszystkie podrzędne węzły tekstowe w dostarczonym węźle i ustawia zakres od początku początkowego węzła do znaku chars.count :
Następnie wywołuję procedurę za pomocą tej funkcji:
Range.collapse (false) ustawia kursor na końcu zakresu. Przetestowałem to z najnowszymi wersjami Chrome, IE, Mozilla i Opera i wszystkie one działają dobrze.
PS. Jeśli ktoś jest zainteresowany, uzyskuję aktualną pozycję kursora za pomocą tego kodu:
Kod działa odwrotnie niż funkcja set - pobiera bieżące window.getSelection (). FocusNode i focusOffset i odlicza wstecz wszystkie napotkane znaki tekstowe, dopóki nie trafi do węzła nadrzędnego o identyfikatorze containerId. Funkcja isChildOf sprawdza przed uruchomieniem, że podany węzeł jest faktycznie dzieckiem podanego elementu parentId .
Kod powinien pracować prosto bez zmian, ale ja po prostu podjąć go z jQuery plugin Mam opracowaną więc włamał się kilka tego roku - daj mi znać, jeśli coś nie działa!
źródło
node.id
iparentId
nawiązuję bez przykładu. Dzięki :)Jeśli nie chcesz używać jQuery, możesz wypróbować następujące podejście:
editableDiv
edytowalny element, nie zapomnij ustawićid
dla niego elementu . Następnie musisz wyciągnąćinnerHTML
z elementu i przeciąć wszystkie przewody hamulcowe. I po prostu ustaw zwinięcie z następnymi argumentami.źródło
źródło
Bardzo trudno jest ustawić karetkę w odpowiedniej pozycji, gdy masz element zaawansowany, taki jak (p) (rozpiętość) itp. Celem jest uzyskanie (tekst obiektu):
źródło
Piszę zakreślacz składni (i podstawowy edytor kodu) i musiałem wiedzieć, jak automatycznie wpisać pojedynczy znak cytatu i przesunąć kursor z powrotem (jak obecnie wiele edytorów kodu).
Oto fragment mojego rozwiązania, dzięki dużej pomocy z tego wątku, dokumentacji MDN i wielu możliwości oglądania konsoli Moz ..
Jest to w zadowalającym elemencie div
Zostawiam to tutaj jako podziękowanie, zdając sobie sprawę, że odpowiedź jest już zaakceptowana.
źródło
Zrobiłem to dla mojego prostego edytora tekstu.
Różnice w stosunku do innych metod:
stosowanie
selection.ts
źródło
Refaktoryzowałem odpowiedź @ Liama. Umieściłem go w klasie metodami statycznymi, sprawiłem, że jego funkcje otrzymały element zamiast #id i kilka innych drobnych poprawek.
Ten kod jest szczególnie dobry do ustawiania kursora w bogatym polu tekstowym, które możesz tworzyć
<div contenteditable="true">
. Utknąłem na tym przez kilka dni, zanim dotarłem do poniższego kodu.edytuj: Jego odpowiedź i ta odpowiedź zawierają błąd związany z naciśnięciem klawisza Enter. Ponieważ Enter nie liczy się jako znak, pozycja kursora zostaje pomieszana po naciśnięciu Enter. Jeśli będę w stanie naprawić kod, zaktualizuję swoją odpowiedź.
edit2: Oszczędź sobie wielu bólów głowy i upewnij się, że
<div contenteditable=true>
takdisplay: inline-block
. To naprawia niektóre błędy związane z wprowadzaniem Chrome<div>
zamiast<br>
po naciśnięciu Enter.Jak używać
Kod
źródło
Myślę, że nie jest łatwo ustawić Caret na pewnej pozycji w zadowalającym elemencie. Napisałem do tego własny kod. Pomija drzewo węzłów, uspokajając liczbę znaków i ustawia karetkę w potrzebnym elemencie. Nie testowałem tego kodu zbyt wiele.
Napisałem również kod, aby uzyskać aktualną pozycję karetki (nie testowałem):
Trzeba także pamiętać, że range.startOffset i range.endOffset zawierają przesunięcie znaków dla węzłów tekstowych (nodeType === 3) i przesunięcie węzła potomnego dla węzłów elementu (nodeType === 1). range.startContainer i range.endContainer mogą odnosić się do dowolnego węzła elementu dowolnego poziomu w drzewie (oczywiście mogą również odnosić się do węzłów tekstowych).
źródło
Na podstawie odpowiedzi Tim Down, ale sprawdza ostatni znany „dobry” wiersz tekstu. Umieszcza kursor na samym końcu.
Ponadto mogłem również rekursywnie / iteracyjnie sprawdzać ostatnie dziecko każdego kolejnego ostatniego dziecka, aby znaleźć absolutny ostatni „dobry” węzeł tekstowy w DOM.
źródło