W JavaScript można programowo zaznaczyć tekst w elemencie input
lub textarea
. Możesz ipt.focus()
zaznaczyć wejście za pomocą , a następnie wybrać jego zawartość za pomocą ipt.select()
. Możesz nawet wybrać konkretny zakres za pomocą ipt.setSelectionRange(from,to)
.
Moje pytanie brzmi: czy istnieje sposób, aby to zrobić również w contenteditable
elemencie?
Odkryłem, że mogę to zrobić elem.focus()
, aby umieścić kursor w contenteditable
elemencie, ale później uruchomienie elem.select()
nie działa (i nie działa setSelectionRange
). Nie mogę znaleźć nic na ten temat w sieci, ale może szukam niewłaściwej rzeczy ...
Nawiasem mówiąc, jeśli to robi jakąkolwiek różnicę, potrzebuję go tylko do pracy w Google Chrome, ponieważ to jest dla rozszerzenia Chrome.
źródło
selectElementContents()
asetTimeout()
lubrequestAnimationFrame()
jeśli wywołano zonfocus
. Zobacz jsfiddle.net/rudiedirkx/MgASG/1/showfocus()
.Oprócz odpowiedzi Tima Downsa stworzyłem rozwiązanie, które działa nawet w oldIE:
Przetestowano w IE 8+, Firefox 3+, Opera 9+ i Chrome 2+. Nawet skonfigurowałem go we wtyczce jQuery:
... a kogo to interesuje, oto to samo dla wszystkich miłośników kawy:
Aktualizacja:
Jeśli chcesz zaznaczyć całą stronę lub zawartość edytowalnego regionu (oznaczonego flagą
contentEditable
), możesz to zrobić znacznie prościej, przełączając się nadesignMode
i używającdocument.execCommand
:W MDN jest dobry punkt wyjścia i niewielka dokumentacja .
(działa dobrze w IE6 +, Opera 9+, Firefoy 3+, Chrome 2+) http://caniuse.com/#search=execCommand
źródło
Ponieważ wszystkie istniejące odpowiedzi dotyczą
div
elementów, wyjaśnię, jak to zrobić za pomocąspan
s.Istnieje subtelna różnica podczas wybierania zakresu tekstu w pliku
span
. Aby móc przekazać indeks początkowy i końcowy tekstu, musisz użyćText
węzła, jak opisano tutaj :źródło
r.setStart(e.firstChild,0); r.setEnd(e.lastChild,e.lastChild.textContent.length);
Oczywiście powinieneś sprawdzić, czy e.firstChild w rzeczywistości nie jest zerowe.<div>
i<span>
elemencie. Przynajmniej nie tak, jak opisujesz.Rangy pozwala ci to zrobić w różnych przeglądarkach z tym samym kodem. Rangy to implementacja metod DOM do selekcji w różnych przeglądarkach. Jest dobrze przetestowany i sprawia, że jest to o wiele mniej bolesne. Nie chcę dotykać treści do edycji bez tego.
Możesz znaleźć rangy tutaj:
http://code.google.com/p/rangy/
Mając rangy w swoim projekcie, zawsze możesz to napisać, nawet jeśli przeglądarka to IE 8 lub starsza i ma zupełnie inny natywny interfejs API do wyboru:
Gdzie „contentEditableNode” to węzeł DOM z atrybutem contenteditable. Możesz to pobrać w ten sposób:
Lub jeśli jQuery jest już częścią twojego projektu i uważasz to za wygodne:
źródło
Taki jest nowoczesny sposób robienia rzeczy. Więcej informacji o MDN
źródło
[Zaktualizowano, aby naprawić błąd]
Oto przykład zaadaptowany na podstawie tej odpowiedzi, który wydaje się działać dobrze w przeglądarce Chrome - Wybierz zakres w edytowalnym div
HTML to:
źródło