Zdarzenie zmiany pola tekstowego jQuery nie jest uruchamiane, dopóki pole tekstowe nie straci fokusu?


133

Zauważyłem, że zdarzenie zmiany jQuery w polu tekstowym nie jest uruchamiane, dopóki nie kliknę poza polem tekstowym.

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

Zobacz demo na JSFiddle

Moja aplikacja wymaga, aby zdarzenie było uruchamiane przy każdej zmianie znaku w polu tekstowym. Próbowałem nawet zamiast tego użyć klucza ...

$("#textbox").keyup(function() {alert("Keyup detected!");});

... ale jest to znany fakt, że zdarzenie keyup nie jest uruchamiane po kliknięciu prawym przyciskiem myszy i wklejeniu.

Jakieś obejście? Czy posiadanie obu słuchaczy spowoduje jakieś problemy?


^^ To. Możesz mieć dowolną liczbę programów obsługi zdarzeń.
Przywróć Monikę Cellio

Odpowiedzi:


297

Wiązanie się z obydwoma zdarzeniami jest typowym sposobem. Możesz również powiązać się ze zdarzeniem wklejania.

Możesz powiązać wiele wydarzeń, takich jak to:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

Jeśli chcesz podejść do tego pedantycznie, powinieneś również ustawić kursor myszy, aby umożliwić przeciąganie tekstu i dodać lastValuezmienną, aby upewnić się, że tekst faktycznie się zmienił:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

A jeśli chcesz być super duperpedantyczny, powinieneś użyć timera interwałów, aby zapewnić automatyczne napełnianie, wtyczki itp:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

9
W końcu ktoś przeczytał pytanie i odpowiedział na całość!
Przywróć Monikę Cellio

4
.on('change keyup paste', function() {...}faktycznie strzela wiele razy! Jeśli wpisałem znak, a następnie kliknąłem na zewnątrz, uruchamiane są zdarzenia „change” i „keyup”, co prowadzi do wielokrotnego wykonywania funkcji! Jeśli kliknąłem prawym przyciskiem myszy, a potem kliknąłem na zewnątrz, uruchamiane są zarówno polecenia „zmień”, jak i „wklej”. Heck! Użycie Ctrl + V do wklejenia, a następnie kliknięcie na zewnątrz uruchamia go trzykrotnie !!
SNag

1
@SNag tak, więc podobnie powinieneś dodać sprawdzenie używając lastValuezmiennej, aby upewnić się, że faktycznie się zmieniła.
Petah

1
+1. Jednak czy w ogóle konieczne jest tu zobowiązanie do „zmiany”? Nie jest dla mnie jasne, jaka sprawa miałaby się załatwić, a która nie byłaby już załatwiona do czasu uruchomienia (zmiany).
Madbreaks

1
Zdarzenie wklejania jest uruchamiane przed faktycznym wklejeniem tekstu
developerbmw

85

W nowoczesnych przeglądarkach, można użyć na inputimprezę :

PRÓBNY

$("#textbox").on('input',function() {alert("Change detected!");});

1
Fajnie - nie byłem tego świadomy. Czy to kwestia HTML5?
Przywróć Monikę Cellio

4
Bardzo chciałbym zaakceptować tę odpowiedź, ale tak jak powiedziałeś, jest to rozwiązanie dla nowoczesnych przeglądarek. Moja aplikacja internetowa jest skierowana do użytkowników, którzy nadal używają IE8, a to nie działa w IE8. :( Co mogę powiedzieć ... :(
SNag

Nie
odpala,

4
$(this).bind('input propertychange', function() {
        //your code here
    });

Działa to na pisanie, wklejanie, wklejanie prawym przyciskiem myszy itp.


1
Wydaje się, że jest to najlepsze rozwiązanie, ponieważ nie uruchamia wielu zdarzeń, jeśli zrobisz coś takiego, jak naciśnięcie strzałki w górę w polu liczbowym.
Justin

Proste i wydajne rozwiązanie
Abdulhameed

4
if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

2

Spróbuj tego:

$("#textbox").bind('paste',function() {alert("Change detected!");});

Zobacz demo na JSFiddle .


Ponieważ pytanie dotyczy wklejania, to nie działa. zdarzenie nie jest uruchamiane po kliknięciu prawym przyciskiem myszy i wklejeniu.
Dhaval Marthak

A co to ma wspólnego z używaniem bind()?
Przywróć Monikę Cellio

powiedział, że on zdarzenie keyup nie jest zwolniony, gdy prawy przycisk myszy + wklej na nim, tak keyupi change()ma swoje typowe zachowanie tak id chce wykonać imprezę potem pastemoże być opcja
Dhaval Marthak

Oczywiście, ale to nadal nie wyjaśnia, dlaczego używa się bindzamiast on.
Przywróć Monikę Cellio

0

Wypróbuj poniższy kod:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

Jak to uchwyciło wklejanie za pomocą myszy, jak wspomniano w pytaniu?
Przywróć Monikę Cellio

keypress jest odpowiedni, skoro tak powiedziałevent to be fired on every character change in the textbox
Venkat.R

Jeśli przeczytasz wszystkie pytania, zobaczysz, że również powiedział:"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."
Przywróć Monikę Cellio

0

Przeczytanie twoich komentarzy doprowadziło mnie do nieprzyjemnej sytuacji. Wiem, że to nie jest właściwy sposób, ale można go obejść.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.