Chcę wykrywać za każdym razem, gdy zmienia się zawartość pola tekstowego. Mogę użyć metody uzupełniania, ale wykryje także naciśnięcia klawiszy, które nie generują liter, jak na przykład klawisze strzałek. Pomyślałem o dwóch metodach wykonania tego za pomocą zdarzenia keyup:
- Sprawdź dokładnie, czy kod ascii naciśniętego klawisza to litera \ backspace \ delete
- Użyj zamknięć, aby zapamiętać tekst w polu tekstowym przed naciśnięciem klawisza i sprawdź, czy to się zmieniło.
Oba wyglądają trochę nieporęcznie.
javascript
jquery
textbox
keypress
olamundo
źródło
źródło
.keyup()
wydarzenie ... więcej informacji tutaj: stackoverflow.com/questions/3003879/….change()
jeśli uległa zmianie.Odpowiedzi:
Zacznij obserwować zdarzenie „wejście” zamiast „zmiana”.
... który jest ładny i czysty, ale można go rozszerzyć na:
źródło
Użyj zdarzenia onchange w HTML / standardowym JavaScript.
W jQuery jest to zdarzenie change () . Na przykład:
$('element').change(function() { // do something } );
EDYTOWAĆ
Po przeczytaniu kilku komentarzy, co z:
źródło
Zdarzenie „zmiana” nie działa poprawnie, ale „wejście” jest idealne.
źródło
.on
zaleca się stosowanie od wersji 1.7 (zamiast.bind
).Co powiesz na to:
<jQuery 1.7
> jQuery 1.7
Działa to w IE8 / IE9, FF, Chrome
źródło
console.log
wartość pola, które rejestruje dwa razy za każdym razem, gdy wpiszesz znak.Tak. Nie musisz koniecznie używać zamknięć, ale musisz zapamiętać starą wartość i porównać ją z nową.
Jednak! To wciąż nie wychwyci każdej zmiany, ponieważ istnieją sposoby edycji zawartości pola tekstowego, które nie wymagają żadnego naciśnięcia klawisza. Na przykład zaznaczenie zakresu tekstu, a następnie kliknięcie prawym przyciskiem myszy. Lub przeciągając. Lub upuszczenie tekstu z innej aplikacji do pola tekstowego. Lub zmieniając słowo za pomocą sprawdzania pisowni w przeglądarce. Lub...
Więc jeśli musisz wykryć każdą zmianę, musisz ją sondować. Możesz
window.setInterval
sprawdzić pole względem jego poprzedniej wartości co (powiedzmy) sekundę. Można również podłączyćonkeyup
do tej samej funkcji, tak aby zmiany, które są spowodowane przez znakom odzwierciedlone są szybciej.Nieporęczny? Tak. Ale tak jest lub po prostu zrób to w zwykły sposób wymiany HTML i nie próbuj natychmiastowej aktualizacji.
źródło
input
wydarzenie HTML5 jest opłacalne i działa w aktualnych wersjach wszystkich głównych przeglądarek.Możesz użyć zdarzenia „input”, aby wykryć zmianę treści w polu tekstowym. Nie używaj „na żywo”, aby powiązać zdarzenie, ponieważ jest ono przestarzałe w Jquery-1.7, więc skorzystaj z „on”.
źródło
Zakładam, że chcesz zrobić coś interaktywnego, gdy zmieni się pole tekstowe (tj. Pobierz niektóre dane przez ajax). Szukałem tej samej funkcjonalności. Wiem, że używanie globalnego rozwiązania nie jest najbardziej niezawodnym ani eleganckim rozwiązaniem, ale właśnie z tym poszedłem. Oto przykład:
Jedną kluczową rzeczą do odnotowania tutaj jest to, że używam setTimeout, a nie setInterval, ponieważ nie chcę wysyłać wielu żądań jednocześnie. Zapewnia to, że licznik czasu „zatrzymuje się” po przesłaniu formularza i „uruchamia się” po wypełnieniu żądania. Robię to, wywołując checkSearchChanged, gdy zakończy się moje wywołanie ajax. Oczywiście możesz to rozwinąć, aby sprawdzić minimalną długość itp.
W moim przypadku używam ASP.Net MVC, więc możesz zobaczyć, jak powiązać to z MVC Ajax, a także w następującym poście:
http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx
źródło
Poleciłbym rzucić okiem na widget autouzupełniania interfejsu użytkownika jQuery. Zajęli się większością spraw, ponieważ ich baza kodu jest bardziej dojrzała niż większość obecnych.
Poniżej znajduje się link do strony demonstracyjnej, dzięki czemu możesz sprawdzić, czy działa. http://jqueryui.com/demos/autocomplete/#default
Największą korzyść uzyskasz, czytając źródło i sprawdzając, jak go rozwiązali. Można go znaleźć tutaj: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .
Zasadniczo robią to wszystko, z czym się wiążą
input, keydown, keyup, keypress, focus and blur
. Następnie mają specjalną obsługę dla wszelkiego rodzaju kluczy, takich jakpage up, page down, up arrow key and down arrow key
. Timer jest używany przed uzyskaniem zawartości pola tekstowego. Gdy użytkownik wpisze klawisz, który nie odpowiada poleceniu (klawisz w górę, klawisz w dół itd.), Pojawia się licznik czasu, który eksploruje zawartość po około 300 milisekundach. W kodzie wygląda to tak:Powodem użycia timera jest to, że interfejs użytkownika ma szansę na aktualizację. Gdy JavaScript jest uruchomiony, interfejs użytkownika nie może zostać zaktualizowany, dlatego wywołanie funkcji opóźnienia. Działa to dobrze w innych sytuacjach, takich jak skupienie się na polu tekstowym (używanym przez ten kod).
Możesz więc użyć widgetu lub skopiować kod do własnego widgetu, jeśli nie używasz interfejsu jQuery (lub w moim przypadku opracowujesz niestandardowy widget).
źródło
Chciałbym zapytać, dlaczego próbujesz wykryć, kiedy zawartość pola tekstowego zmieniała się w czasie rzeczywistym ?
Alternatywą byłoby ustawienie timera (przez setIntval?) I porównanie ostatnio zapisanej wartości z bieżącą, a następnie zresetowanie timera. Zapewniłoby to wyłapanie KAŻDEJ zmiany, spowodowanej przez klawisze, mysz, inne urządzenie wejściowe, którego nie wziąłeś pod uwagę, a nawet JavaScript zmieniającą wartość (innej możliwości, o której nikt nie wspominał) z innej części aplikacji.
źródło
czy rozważasz użycie zdarzenia zmiany ?
źródło
Użyj
textchange
zdarzenia za pomocą niestandardowego podkładki jQuery w celuinput
zapewnienia zgodności z różnymi przeglądarkami . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (ostatnio rozwidlony github: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )Obsługuje wszystkie znaczniki wejściowe, w tym
<textarea>content</textarea>
, które nie zawsze działają zchange
keyup
itd. (!) Tylko jQueryon("input propertychange")
obsługuje<textarea>
tagi konsekwentnie, a powyższe jest fałszywe dla wszystkich przeglądarek, które nie rozumiejąinput
zdarzenia.Test JS Bin
To również obsługuje wklejanie, usuwanie i nie powiela wysiłku na keyup.
Jeśli nie używasz podkładki dystansowej, użyj
on("input propertychange")
zdarzeń jQuery .źródło
Jest kompletnym przykładem pracy tutaj .
źródło
Coś jak to powinno działać, głównie dlatego,
focus
ifocusout
skończy się z dwóch oddzielnych wartości. Używamdata
tutaj, ponieważ przechowuje wartości w elemencie, ale nie dotyka DOM. Jest to również łatwy sposób na przechowywanie wartości związanej z jego elementem. Równie łatwo można użyć zmiennej o wyższym zasięgu.źródło
Ten kod wykrywa, gdy zawartość pola tekstowego zostanie zmieniona przez użytkownika i zmodyfikowana przez kod JavaScript.
źródło