Wykrywanie zmiany wejścia w jQuery?

Podczas używania jquery {[0] } Na input zdarzenie zostanie wywołane tylko wtedy, gdy wejście straci fokus

W moim przypadku, muszę wykonać połączenie do serwisu (sprawdzić, czy wartość jest prawidłowa), jak tylko wartość wejściowa zostanie zmieniona. Jak mógłbym tego dokonać?

Author: mikemaccana, 2011-06-23
Source

8 answers

Aktualizacja dla wyjaśnienia i przykład

Przykłady: http://jsfiddle.net/pxfunc/5kpeJ/

Metoda 1. input event

W nowoczesnych przeglądarkach użyj input wydarzenie. To zdarzenie zostanie wywołane, gdy użytkownik będzie wpisywał w pole tekstowe, wklejał, cofał, w zasadzie za każdym razem, gdy wartość została zmieniona z jednej wartości na drugą.

W jQuery zrób to tak 

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

Począwszy od jQuery 1.7, zamień bind na on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Metoda 2. keyup event

Dla starszych przeglądarek należy użyć zdarzenia keyup (zostanie ono wywołane po zwolnieniu klawisza na klawiaturze, zdarzenie to może dać rodzaj fałszywego dodatniego wyniku, ponieważ po zwolnieniu " w "zmieni się wartość wejściowa i zostanie wywołane zdarzenie keyup, ale również po zwolnieniu klawisza "shift" zostanie wywołane zdarzenie keyup, ale nie dokonano żadnej zmiany na wejściu.). Również ta metoda nie odpala się, jeśli użytkownik kliknie prawym przyciskiem myszy i wkleje z kontekstu menu: 

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Metoda 3. Timer (setInterval lub setTimeout)

Aby ominąć ograniczenia keyup, możesz ustawić timer, aby okresowo sprawdzał wartość wejściową, aby określić zmianę wartości. Możesz użyć setInterval lub setTimeout do tego sprawdzenia timera. Zobacz zaznaczoną odpowiedź na to pytanie: jQuery textbox change event lub zobacz fiddle dla przykładu roboczego przy użyciu zdarzeń focus i blur, aby uruchomić i zatrzymać timer dla określonego pola wejściowego

 488
Author: MikeM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:29

Jeśli masz HTML5:

  • oninput (uruchamia się tylko wtedy, gdy zmiana faktycznie nastąpi, ale robi to natychmiast)

W przeciwnym razie musisz sprawdzić wszystkie te zdarzenia, które mogą wskazywać na zmianę wartości elementu wejściowego:

  • onchange
  • onkeyup (Nie keydown lub keypress, ponieważ wartość wejścia nie będzie miała jeszcze nowego naciśnięcia klawisza)
  • onpaste (gdy jest obsługiwana)

I może:

  • onmouseup (nie jestem pewien ten)
 181
Author: Alnitak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-23 18:54:39

Z HTML5 i bez użycia jQuery, można użyć input event : 

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

Zostanie uruchomiony za każdym razem, gdy zmieni się tekst wejścia.

Obsługiwane w IE9+ i innych przeglądarkach.

Spróbuj żyć w jsFiddle tutaj .

 79
Author: Drew Noakes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-22 18:11:02

Jak już inni sugerowali, rozwiązaniem w Twoim przypadku jest powąchać wiele zdarzeń .
Wtyczki wykonujące tę pracę często nasłuchują następujących zdarzeń: 

$input.on('change keydown keypress keyup mousedown click mouseup', handler);

Jeśli uważasz, że może pasować, możesz dodać focus, blur i inne wydarzenia.
Sugeruję, aby nie przekraczać w zdarzeniach do odsłuchu, ponieważ ładuje się w pamięci przeglądarki dalsze procedury do wykonania zgodnie z zachowaniem użytkownika.

Uwaga: zwróć uwagę, że zmiana wartości elementu wejściowego przy użyciu JavaScript (np. poprzez metodę jQuery .val()) nie odpali żadnego z powyższych zdarzeń.
(Numer referencyjny: https://api.jquery.com/change/).

 10
Author: Emanuele Del Grande,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-15 03:36:08

Jeśli chcesz, aby zdarzenie zostało wywołane za każdym razem, gdy coś zostanie zmienione w elemencie, możesz użyć zdarzenia keyup .

 2
Author: Jivings,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-23 18:30:31

// .rozmycie jest wyzwalane, gdy element traci ostrość 

$('#target').blur(function() {
  alert($(this).val());
});

/ / aby wyzwalać ręcznie użyj: 

$('#target').blur();
 1
Author: Kszili,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-01 15:16:20

Istnieją zdarzenia jQuery, takie jak keyup i keypress , których można używać z wejściowymi elementami HTML. Można dodatkowo użyć zdarzenia blur () .

 0
Author: softwaredeveloper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-23 18:34:55

To obejmuje każdą zmianę wejścia używającego jQuery 1.7 i wyżej: 

$(".inputElement").on("input", null, null, callbackFunction);
 0
Author: rybo111,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-04 22:38:47