Wykrywanie zmiany wartości wejścia [typ = tekst] w jQuery

159

Chcę wykonać funkcję za każdym razem, gdy zmienia się wartość określonego pola wejściowego. To niemal pracuje $('input').keyup(function), ale nic się nie dzieje podczas wklejania tekstu w polu, na przykład. $input.change(function)uruchamia się tylko wtedy, gdy dane wejściowe są zamazane, więc skąd mam natychmiast wiedzieć, gdy pole tekstowe zmieniło wartość?

Jeriko
źródło
2
Dlaczego więc nie wiązać obu keyupi pastewydarzeń?
Ilia G
devcurry.com/2009/07/… - Wykrywanie zdarzeń wycinania / kopiowania / wklejania
BeRecursive
2
@ liho1eye pasteto tylko jedna z tych rzeczy , o których pomyślałem. Wolę raczej posłuchać ostatecznej zmiany, niż myśleć o różnych nadchodzących ścieżkach.
Jeriko,
@Jeriko To jedyne dwa sposoby na zmianę wartości (poza oczywistą aktualizacją za pomocą kodu js).
Ilia G,
Chcesz także przechwycić Ctlr-X ( cut).
Alexis Wilke,

Odpowiedzi:

341

pamiętaj tylko, że 'on' jest zalecane zamiast funkcji 'bind', więc zawsze staraj się używać detektora zdarzeń w ten sposób:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});
Alejandro Silva
źródło
Dlaczego pastejednak? Najpierw pomyślałem, że zadziała tylko wtedy, gdy wkleimy coś z CTRL+V.
Czarny
3
@ NicolasS.Xu: bezpośredni asignation wartości nie powoduje żadnego zdarzenia DOM
Alejandro Silva
Byłoby jeszcze lepiej, gdyby console.log()zamiast alert. Byłoby bardzo irytujące dla klucza alert.
cytsunny
4
@cytsunny, jasne, alert jest denerwujący, ale w tym przypadku jest to przykład kodu, który ma zostać wykonany przy zmianie wartości, naprawdę może to być dowolny ładunek, który chcesz.
Alejandro Silva
1
Jeśli klikniesz prawym przyciskiem myszy i wkleisz, zwróci to wartość wejścia sprzed wklejenia.
alstr
104

Opis

Możesz to zrobić za pomocą .bind()metody jQuery . Sprawdź jsFiddle .

Próba

HTML

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

jQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

Więcej informacji

dknaack
źródło
6

możesz również użyć wydarzeń w polu tekstowym -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Spróbuj tego

Ishan Jain
źródło
5

Spróbuj tego:

Zasadniczo wystarczy wziąć pod uwagę każde zdarzenie:

HTML:

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

JQuery:

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
}); 
H Bellamy
źródło
3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

wybierz, aby wyświetlić sugestię przeglądarki

mohamad yazdanpanah
źródło
2

Spróbuj tego:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})
Hamed Khosravi
źródło
0

Użyj tego: https://github.com/gilamran/JQuery-Plugin-AnyChange

Obsługuje wszystkie sposoby zmiany danych wejściowych, w tym menu zawartości (za pomocą myszy)

gilamran
źródło
Jak tego używasz? Umieściłem go w moim HTML i użyłem $ ("input"). AnyChange (function (e) {console.log (e);}); Ale nigdy nie dotarło do linii console.log
Ofer Gal
0

U mnie zadziałało takie połączenie wydarzeń:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});
Nole
źródło
0

NIE ZAPOMNIJ O cutlubselect wydarzeniach!

Przyjęta odpowiedź jest prawie idealna, ale zapomina o cutiselect wydarzeniach .

cut jest uruchamiany, gdy użytkownik wycina tekst (CTRL + X lub przez kliknięcie prawym przyciskiem myszy)

select jest uruchamiany, gdy użytkownik wybierze opcję sugerowaną przez przeglądarkę

Powinieneś je również dodać, jako takie:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
Oscar Chambers
źródło