Jak mogę uzyskać jquery .val () PO zdarzeniu keypress?

101

Mam:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Teraz alert zawsze zwraca wartość PRZED naciśnięciem klawisza (np. Pole jest puste, wpisuję „a” i alert daje mi „”. Następnie wpisuję „b”, a alert daje mi „a” ...). Ale chcę mieć wartość PO naciśnięciu klawisza - jak mogę to zrobić?

Tło: Chciałbym włączyć przycisk, gdy tylko pole tekstowe zawiera co najmniej jeden znak. Więc uruchamiam ten test dla każdego zdarzenia naciśnięcia klawisza, ale używając zwróconej wartości val (), wynik jest zawsze o jeden krok za. Użycie zdarzenia change () nie jest dla mnie opcją, ponieważ przycisk jest wówczas wyłączony, dopóki nie opuścisz pola tekstowego. Jeśli istnieje lepszy sposób na zrobienie tego, cieszę się, że to słyszę!

Jörg Brenninkmeyer
źródło
Czy przycisk powinien zostać ponownie wyłączony, jeśli tekst zostanie usunięty? Jeśli tak, prawdopodobnie będziesz musiał trzymać się klawisza.
Brilliand

Odpowiedzi:

152

Zmień keypressna keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypressjest uruchamiany po naciśnięciu klawisza, keyupjest uruchamiany po zwolnieniu klawisza.

Hooray Im Helping
źródło
@Brilliand Masz rację. Zrobiłem obejście tego problemu, jest to zamieszczone poniżej.
David Oliveros
7
jak komu udało się to osiągnąć na urządzeniach iPhone / Android? Nie obsługują funkcji keyup.
Merijn Den Houting
4
definicja naciśnięcia klawisza nie jest dokładnie poprawna. to jest definicja keydown. zobacz quirksmode.org/dom/events/keys.html
Challet
59

Zaskoczony, że nikt nie wspomniał o zdarzeniu js „input”:

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Zalecana.

https://developer.mozilla.org/en-US/docs/Web/Events/input

billynoah
źródło
8
Wow, to jest odpowiedź na kilka pytań SO bez odpowiedzi / z błędną odpowiedzią.
Ben Racicot
4
Jest to również świetne, gdy musisz zignorować naciskanie klawiszy strzałek, shift itp. W polu wprowadzania.
hovado
2
caniuse.com/#search=input Stosunkowo dobra obsługa przeglądarek. O wiele lepsza odpowiedź niż słuchanie każdego klawisza.
James Haug
1
To ratuje mój dzień! Dziękuję Ci. Użyłem następującego kodu: $ ('. Subject_mark'). On ("input", function () {var $ th = $ (this); $ th.val ($ th.val (). Replace (/ [^ 0-9] / g, function (str) {return '';}));
arsho
5

Alternatywnie możesz użyć zdarzenia keydown z limitem czasu równym 0.

W ten sposób zmiany zostaną zastosowane natychmiast, a nie, gdy użytkownik przestanie trzymać klawisz.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});
David Oliveros
źródło
To nadal będzie zachowywać się dziwnie w przypadku przytrzymania klawisza Backspace ... może naciśnięcie klawisza z limitem czasu równym 0?
Brilliand
Ach, nieważne, OP nie określa, co powinno się stać, jeśli pole tekstowe zostanie wyczyszczone.
Brilliand
4

Możesz chcieć podłączyć onchangeprocedurę obsługi zdarzeń zamiast używać któregokolwiek z kluczowych zdarzeń.

$(someTextInputField).change(function() {
    alert($(this).val());
});

Użycie Edit > Pastelub Kliknięcie prawym przyciskiem myszy, a następnie Wklejanie spowoduje uruchomienie zdarzenia zmiany, ale nie zdarzenia kluczowego. Zauważ, że niektóre przeglądarki mogą symulować kluczowe zdarzenie na wklejce (chociaż nie znam żadnego), ale nie możesz liczyć na takie zachowanie.

Stephen P.
źródło
4

Spróbuj czegoś takiego:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

To po prostu wprowadza limit czasu, dzięki czemu po zakończeniu pętli zdarzenia „naciśnięcie klawisza” Twój kod zostanie uruchomiony niemal natychmiast po tym. Tak krótki interwał timera (nawet zaokrąglony przez przeglądarkę) nie będzie zauważalny.

edit - albo mógł użyć „keyUp” jak każdy inny mówi, chociaż jego semantyka są różne.

Spiczasty
źródło
To nie jest kwestia łagodnej inteligencji . Zdarzenie keyup nie daje tego samego wyniku. Otrzymujesz odrębne zdarzenia dla shift, ctrl itp. Z keyup - jeśli chcesz uzyskać rzeczywisty wpisywany znak (taki jak ampersand) zamiast serii kluczowych zdarzeń, które musisz sprawdzić stan klawiszy Shift lub Ctrl, naciśnij klawisz jest droga do zrobienia.
Ripside
1
Dobrze; to właśnie miałem na myśli mówiąc „to jest inna semantyka”.
Pointy