Chcę wyzwolić żądanie ajax, gdy użytkownik skończy pisać w polu tekstowym. Nie chcę, aby uruchamiała tę funkcję za każdym razem, gdy użytkownik wpisuje literę, ponieważ spowodowałoby to DUŻO żądań ajax, jednak nie chcę, aby musiała także naciskać przycisk Enter.
Czy istnieje sposób, dzięki któremu mogę wykryć, kiedy użytkownik skończył pisać, a następnie wykonać żądanie ajax?
Za pomocą jQuery tutaj! Dave
javascript
jquery
keyboard
David Zorychta
źródło
źródło
Odpowiedzi:
Więc zgaduję, że zakończenie pisania oznacza, że przestaniesz na chwilę, powiedzmy 5 sekund. Mając to na uwadze, zacznijmy odliczanie czasu, gdy użytkownik zwolni klawisz i wyczyść go, gdy go naciśnie. Zdecydowałem, że dane wejściowe to #myInput.
Dokonując kilku założeń ...
źródło
doneTyping
na przykład, działa natychmiast. Zwykle jest to wynikiem przypadkowego włączenia()
nazwy funkcji. Należy pamiętać, że powinien on czytaćsetTimeout(doneTyping,
niesetTimeout(doneTyping(),
Wybrana powyżej odpowiedź nie działa.
Ponieważ typingTimer jest czasami ustawiany wiele razy (naciśnięcie klawisza dwukrotnie przed uruchomieniem skrótu klawiaturowego dla szybkich maszyn do pisania itp.), To nie jest poprawnie usuwane.
Poniższe rozwiązanie rozwiązuje ten problem i wywołuje X sekund po zakończeniu zgodnie z żądaniem PO. Nie wymaga już także redundantnej funkcji keydown. Dodałem również zaznaczenie, aby wywołanie funkcji nie nastąpiło, jeśli dane wejściowe są puste.
I ten sam kod w waniliowym rozwiązaniu JavaScript:
To rozwiązanie korzysta z ES6, ale tutaj nie jest konieczne. Wystarczy wymienić
let
zvar
a funkcja strzałka z regularnym funkcji.źródło
$('#myInput').on('input', function() {
jeśli chcesz, aby działało to z kopiowaniem i wklejaniem. Nie widzę sensu sprawdzania, czy dane wejściowe są puste. Załóżmy, że chce usunąć to, co wpisał, nie uda się wywołać wywołania ajax.if ($('#myInput').val)
zamiastif ($('#myInput').val())
? Powinna.val
być funkcja?To tylko jedna linia z funkcją debounce underscore.js :
To w zasadzie mówi doSomething 500 milisekund po tym, jak przestanę pisać.
Aby uzyskać więcej informacji: http://underscorejs.org/#debounce
źródło
Uncaught ReferenceError: _ is not defined
Tak, możesz ustawić limit czasu powiedzmy 2 sekundy dla każdego zdarzenia kluczowania, które uruchomi żądanie ajax. Możesz także zapisać metodę XHR i przerwać ją przy kolejnych naciśnięciach klawiszy, aby jeszcze bardziej zaoszczędzić pasmo. Oto coś, co napisałem dla mojego autouzupełniania.
Mam nadzieję że to pomoże,
Marko
źródło
pełny przykład tutaj: http://jsfiddle.net/ZYXp4/8/
źródło
Obie 2 najlepsze odpowiedzi nie działają dla mnie. Oto moje rozwiązanie:
źródło
Podoba mi się odpowiedź Surreal Dream, ale stwierdziłem, że moja funkcja „doneTyping” uruchamiałaby się przy każdym naciśnięciu klawisza, tzn. Jeśli bardzo szybko wpiszesz „Hello”; zamiast strzelać tylko raz, gdy przestaniesz pisać, funkcja uruchomi się 5 razy.
Problem polegał na tym, że funkcja setTimeout w javascript nie wydaje się zastępować ani zabijać wcześniej ustawionych limitów czasu, ale jeśli zrobisz to sam, zadziała! Właśnie dodałem wywołanie clearTimeout tuż przed setTimeout, jeśli ustawiony jest typingTimer. Patrz poniżej:
NB Chciałbym właśnie dodać to jako komentarz do odpowiedzi Surreal Dream, ale jestem nowym użytkownikiem i nie mam wystarczającej reputacji. Przepraszam!
źródło
Modyfikowanie zaakceptowanej odpowiedzi w celu obsługi dodatkowych przypadków, takich jak wklej:
źródło
Nie sądzę, aby w tym przypadku konieczne było zdarzenie keyDown (proszę powiedz mi, dlaczego się mylę). W moim skrypcie (innym niż jquery) podobne rozwiązanie wygląda tak:
To moja pierwsza odpowiedź na temat przepełnienia stosu, więc mam nadzieję, że kiedyś to komuś pomoże :)
źródło
Zadeklaruj następującą
delay
funkcję:a następnie użyj go:
źródło
Późna odpowiedź, ale dodaję ją, ponieważ jest to rok 2019 i jest to całkowicie możliwe do osiągnięcia przy użyciu ładnego ES6, bez bibliotek stron trzecich, i uważam, że większość wysoko ocenianych odpowiedzi jest nieporęczna i obciążona zbyt dużą liczbą zmiennych.
Eleganckie rozwiązanie zaczerpnięte z tego doskonałego posta na blogu.
źródło
Cóż, ściśle mówiąc, nie, ponieważ komputer nie może odgadnąć, kiedy użytkownik skończył pisać. Możesz oczywiście odpalić licznik czasu na klucz i zresetować go przy każdym kolejnym kluczowaniu. Jeśli licznik czasu wygaśnie, użytkownik nie pisał przez czas licznika czasu - możesz nazwać to „zakończeniem pisania”.
Jeśli oczekujesz, że użytkownicy pauzują podczas pisania, nie ma sposobu, aby dowiedzieć się, kiedy są zrobione.
(O ile oczywiście nie można stwierdzić na podstawie danych, kiedy są gotowe)
źródło
Wydaje mi się, że rozwiązanie jest nieco prostsze w
input
przypadku tego wydarzenia:źródło
zgadzam się z odpowiedzią @going. Innym podobnym rozwiązaniem, które działało dla mnie, jest poniższe. Jedyną różnicą jest to, że używam .on („input” ...) zamiast keyup. To tylko przechwytuje zmiany na wejściu. inne klawisze, takie jak Ctrl, Shift itp. są ignorowane
źródło
Właśnie wymyśliłem prosty kod, który czeka, aż użytkownik skończy pisać:
krok 1. ustaw limit czasu na zero, a następnie usuń bieżący limit czasu podczas pisania przez użytkownika.
krok 2. wyzeruj limit czasu przed zdefiniowaniem zmiennej przed wywołaniem zdarzenia kluczowania.
krok 3. zdefiniuj limit czasu dla zmiennej zadeklarowanej powyżej;
kod javascript
źródło
Wdrożyłem wyszukiwanie w mojej aukcji i potrzebowałem, aby było ono oparte na ajax. Oznacza to, że przy każdej kluczowej zmianie wyszukiwane wyniki powinny być aktualizowane i wyświetlane. Powoduje to tak wiele wywołań ajax wysyłanych do serwera, co nie jest dobre.
Po pewnym czasie podszedłem do pingowania serwera, gdy użytkownik przestaje pisać.
To rozwiązanie działało dla mnie:
Zauważysz, że podczas implementacji nie musisz używać żadnego timera.
źródło
Oto prosty kod JS, który napisałem:
źródło
Za pomocą zdarzenia onblur można wykryć, kiedy pole tekstowe przestaje być aktywne: https://developer.mozilla.org/en/DOM/element.onblur
To nie to samo, co „przestaje pisać”, jeśli dbasz o przypadek, w którym użytkownik wpisuje kilka rzeczy, a następnie siedzi tam z zaznaczonym polem tekstowym.
W tym celu sugerowałbym powiązanie setTimeout ze zdarzeniem onclick i przyjęcie, że po x czasie bez naciśnięć klawiszy użytkownik przestał pisać.
źródło
Dlaczego nie skorzystać z onfocusout?
https://www.w3schools.com/jsreF/event_onfocusout.asp
Jeśli jest to formularz, zawsze pozostawiają fokus każdego pola wejściowego w celu kliknięcia przycisku przesyłania, abyś wiedział, że żadne dane wejściowe nie zostaną pominięte w wywołaniu modułu obsługi zdarzeń onfocusout.
źródło
Jeśli użytkownik musi odejść od pola, możemy użyć „onBlur” zamiast Onchange w JavaScript
Jeśli nie jest to konieczne, dobrym pomysłem będzie ustawienie timera.
źródło
Po wykryciu fokusa na polu tekstowym, po włączeniu klucza sprawdź limit czasu i zresetuj go przy każdym uruchomieniu.
Po upływie limitu czasu wykonaj żądanie ajax.
źródło
Jeśli szukasz określonej długości (np. Pola kodu pocztowego):
źródło
Nie jestem pewien, czy moje potrzeby są po prostu dziwne, ale potrzebowałem czegoś podobnego do tego i właśnie to wykorzystałem:
Co pozwala mi mieć takie elementy w mojej aplikacji:
Które są aktualizowane, gdy użytkownik „kończy pisanie” (brak działania przez 2 sekundy) lub przechodzi do innego pola (usuwa się z elementu)
źródło
Jeśli potrzebujesz poczekać, aż użytkownik skończy pisać, użyj prostej:
Kompletny przykład z wywołaniem ajax - działa to na mój pager - liczba pozycji na liście:
źródło
Wiele timerów na stronie
Wszystkie pozostałe odpowiedzi działają tylko dla jednej kontroli ( moja druga odpowiedź włącznie). Jeśli masz wiele kontrolek na stronie (np. W koszyku), wywoływana będzie tylko ostatnia kontrolka, w której użytkownik wpisał coś . W moim przypadku z pewnością nie jest to pożądane zachowanie - każda kontrola powinna mieć własny licznik czasu.
Aby rozwiązać ten problem, wystarczy przekazać identyfikator funkcji i utrzymywać słownik timeoutHandles, jak w poniższym kodzie:
Deklaracja funkcji:
Zastosowanie funkcji:
źródło
Prosty i łatwy do zrozumienia.
źródło
Do przekazywania parametrów do funkcji wraz ze składnią ES6.
źródło
Wow, nawet 3 komentarze są całkiem poprawne!
Puste dane wejściowe nie są powodem do pominięcia wywołania funkcji, np. Usuwam parametr odpadów z adresu URL przed przekierowaniem
.on ('input', function() { ... });
powinny być wykorzystywane do wyzwalaniakeyup
,paste
orazchange
imprezzdecydowanie
.val()
lub.value
należy go użyćMożesz użyć
$(this)
funkcji zdarzenia wewnętrznego zamiast#id
pracować z wieloma wejściami(moja decyzja) Korzystam z anonimowej funkcji zamiast
doneTyping
wsetTimeout
celu łatwego dostępu$(this)
z wersji 4, ale najpierw musisz ją zapisaćvar $currentInput = $(this);
EDYCJA Widzę, że niektórzy ludzie nie rozumieją wskazówek bez możliwości skopiowania i wklejenia gotowego kodu. Oto jesteś
źródło
paste
, nie używathis
itp. (Myślę, że to ważne, ale nie chcę zgubić się w