Jak uzyskać pozycję daszka w <textarea>
używającym JavaScript?
Na przykład: This is| a text
To powinno powrócić 7
.
Jak sprawiłbyś, że zwraca ciągi otaczające kursor / zaznaczenie?
Np 'This is', '', ' a text'
. : .
Jeśli słowo „jest” jest podświetlone, to zostanie zwrócone 'This ', 'is', ' a text'
.
javascript
cursor
textarea
caret
Niespokojny wędrowiec
źródło
źródło
textarea.selectionStart
,textarea. selectionEnd
,textarea.setSelectionRange
developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElementOdpowiedzi:
W Firefoksie, Safari (i innych przeglądarkach opartych na Gecko) możesz łatwo użyć textarea.selectionStart, ale w IE to nie działa, więc będziesz musiał zrobić coś takiego:
( pełny kod tutaj )
Polecam również sprawdzić wtyczkę jQuery FieldSelection , pozwala to zrobić i wiele więcej ...
Edycja: faktycznie ponownie zaimplementowałem powyższy kod:
Sprawdź przykład tutaj .
źródło
Safari (and other Gecko based browsers)
wydaje się sugerować, że Safari używa Gecko. Gecko to silnik Mozilli; Safari używa WebKit.if (el.selectionStart) { return el.selectionStart; }
Zaktualizowano 5 września 2010 r
Ponieważ wydaje się, że wszyscy są tu skierowani do tego problemu, dodaję swoją odpowiedź na podobne pytanie, które zawiera ten sam kod co ta odpowiedź, ale z pełnym tłem dla zainteresowanych:
Document.selection.createRange w IE nie zawiera początkowych ani końcowych pustych wierszy
Uwzględnienie końca linii jest trudne w IE i nie widziałem żadnego rozwiązania, które robi to poprawnie, w tym żadnych innych odpowiedzi na to pytanie. Możliwe jest jednak użycie poniższej funkcji, która zwróci początek i koniec zaznaczenia (które są takie same w przypadku daszka) w
<textarea>
tekście lub<input>
.Zwróć uwagę, że obszar tekstu musi mieć fokus, aby ta funkcja działała poprawnie w IE. W razie wątpliwości
focus()
najpierw wywołaj metodę textarea .źródło
range && range.parentElement() == el
służy do sprawdzenia, czy zaznaczenie znajduje się w obszarze tekstu i czy jest konieczne. Nie ma problemu z uzyskaniem przez funkcję pozycji karetki , o ile obszar tekstowy ma fokus . Jeśli nie masz pewności,focus()
przed wywołaniem wywołaj metodę textareagetInputSelection()
. Dodam notatkę do odpowiedzi.mousedown
zdarzenia lub dodanieunselectable="on"
do<div>
elementu.Zmodyfikowałem powyższą funkcję, aby uwzględnić zwroty karetki w IE. Nie jest testowany, ale zrobiłem z nim coś podobnego w swoim kodzie, więc powinno działać.
źródło
Jeśli nie musisz obsługiwać IE, możesz użyć atrybutów
selectionStart
i .selectionEnd
textarea
Aby uzyskać pozycję daszka, użyj
selectionStart
:Aby uzyskać ciągi otaczające zaznaczenie, użyj następującego kodu:
Demo na JSFiddle .
Zobacz także dokumentację HTMLTextAreaElement .
źródło