Jak ustawić pozycję kursora w polu tekstowym za pomocą jQuery? Mam pole tekstowe z zawartością i chcę, aby kursor użytkowników był ustawiony z pewnym przesunięciem, gdy skupią się na polu. Kod powinien wyglądać mniej więcej tak:
$('#input').focus(function() {
$(this).setCursorPosition(4);
});
Jak wyglądałoby wdrożenie tej funkcji setCursorPosition? Jeśli masz pole tekstowe z zawartością abcdefg, to wywołanie spowoduje ustawienie kursora w następujący sposób: abcd ** | ** efg.
Java ma podobną funkcję, setCaretPosition. Czy istnieje podobna metoda dla javascript?
Aktualizacja: zmodyfikowałem kod CMS do pracy z jQuery w następujący sposób:
new function($) {
$.fn.setCursorPosition = function(pos) {
if (this.setSelectionRange) {
this.setSelectionRange(pos, pos);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
if(pos < 0) {
pos = $(this).val().length + pos;
}
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
}(jQuery);
javascript
jquery
html
textfield
jcnnghm
źródło
źródło
$(this).get(0).setSelectionRange)
? Wiesz, że to dokładnie to samothis.setSelectionRange
, tylko wolniejsze i trudniejsze do odczytania, prawda? jQuery nie robi dla ciebie dosłownie nic.Odpowiedzi:
Mam dwie funkcje:
Następnie możesz użyć setCaretToPos w następujący sposób:
Przykład na żywo z a
textarea
i aninput
, pokazujący użycie z jQuery:Pokaż fragment kodu
Od 2016 r. Przetestowane i działające na przeglądarkach Chrome, Firefox, IE11, a nawet IE8 (zobacz to ostatnie tutaj ; Fragmenty stosu nie obsługują IE8).
źródło
textarea
(iinput
) dla mnie w Chrome, Firefox, IE8 i IE11.Oto rozwiązanie jQuery:
Dzięki temu możesz to zrobić
źródło
selectRange($('.my_input')[0], 3, 5)
jeśli już używasz jQuery. Ponadto powinien działać z więcej niż jednym elementem, jeśli jest to potrzebne, z jakiegokolwiek powodu. Jeśli chcesz mieć czystą natywność, skorzystaj z rozwiązania CMS.$('#elem').focus()
wcześniej dodać, aby pojawił się migający kursor.Rozwiązania tutaj są słuszne, z wyjątkiem kodu rozszerzenia jQuery.
Funkcja rozszerzenia powinna iterować po każdym wybranym elemencie i powrócić
this
do tworzenia łańcuchów pomocniczych. Oto poprawna wersja:źródło
return this.each(function...)
i usunąć samodzielną linię.Znalazłem rozwiązanie, które działa dla mnie:
Teraz możesz przenieść fokus na koniec dowolnego elementu, wywołując:
Lub określasz pozycję.
źródło
this.scrollTop(this[0].scrollHeight);
, aby zapewnić przewijanie obszaru tekstowego , aby widoczny był punkt wstawiania.Działa to dla mnie w Safari 5 na Mac OSX, jQuery 1.4:
źródło
Zdaję sobie sprawę, że jest to bardzo stary post, ale pomyślałem, że powinienem zaoferować być może prostsze rozwiązanie, aby zaktualizować go przy użyciu tylko jQuery.
Sposób użycia ctrl-enter w celu dodania nowej linii (jak na Facebooku):
Jestem otwarty na krytykę. Dziękuję Ci.
AKTUALIZACJA: To rozwiązanie nie pozwala na działanie normalnych funkcji kopiowania i wklejania (tj. Ctrl-c, ctrl-v), więc będę musiał to edytować w przyszłości, aby upewnić się, że ta część znowu działa. Jeśli masz pomysł, jak to zrobić, skomentuj tutaj, a chętnie go przetestuję. Dzięki.
źródło
W IE, aby przesunąć kursor na jakąś pozycję, wystarczy ten kod:
źródło
Używam tego: http://plugins.jquery.com/project/jCaret
źródło
Czy w ten sposób ustawić fokus, zanim wstawisz tekst do obszaru tekstowego?
źródło
Działa to dla mnie w chrome
Najwyraźniej potrzebujesz opóźnienia w mikrosekundach lub więcej, ponieważ zwykle użytkownik skupia się na polu tekstowym, klikając dowolną pozycję w polu tekstowym (lub naciskając klawisz Tab), którą chcesz zastąpić, więc musisz poczekać, aż pozycja będzie ustawione przez użytkownika kliknij, a następnie zmień.
źródło
Pamiętaj tylko, aby zwracać wartość false zaraz po wywołaniu funkcji, jeśli używasz klawiszy strzałek, ponieważ w przeciwnym razie Chrome przerabia frack.
źródło
return false;
. Zamiastevent.preventDefault();
tego chcesz . Jeśli zwrócisz fałsz, sugerujesz,event.stopPropagation()
co nie zawsze jest pożądaneW oparciu o to pytanie odpowiedź nie zadziała idealnie dla ie i opery, gdy w polu tekstowym pojawi się nowa linia. W odpowiedzi wyjaśniono, jak dostosować selectionStart, selectionEnd przed wywołaniem setSelectionRange.
Próbowałem wyregulować opcję z drugiego pytania z rozwiązaniem zaproponowanym przez @AVProgrammer i działa.
źródło
Mała modyfikacja kodu, którą znalazłem w bitbucket
Kod może teraz wybierać / wyróżniać za pomocą punktów początkowych / końcowych, jeśli otrzyma 2 pozycje. Testowane i działa dobrze w FF / Chrome / IE9 / Opera.
Kod jest wymieniony poniżej, zmieniono tylko kilka wierszy:
źródło
Musiałem sprawić, by działało to w przypadku elementów zadowalających i jQuery, i pomyślałem, że ktoś może chcieć, aby był gotowy do użycia:
Użycie
$(selector).getCaret()
zwraca przesunięcie liczby i$(selector).setCaret(num)
ustanawia przesunięcie i ustawia fokus na elemencie.Również mała wskazówka, jeśli uruchomisz
$(selector).setCaret(num)
z konsoli, zwróci plik console.log, ale nie zwizualizujesz fokusa, ponieważ jest on ustalany w oknie konsoli.Bests; D
źródło
Możesz bezpośrednio zmienić prototyp, jeśli setSelectionRange nie istnieje.
Link do jsFiddle
źródło