Erkennen einer Wertänderung der Eingabe [Typ = Text] in jQuery

159

Ich möchte jedes Mal eine Funktion ausführen, wenn sich der Wert eines bestimmten Eingabefelds ändert. Es funktioniert fast mit $('input').keyup(function), aber nichts passiert, wenn zum Beispiel Text in das Feld eingefügt wird. $input.change(function)Wird nur ausgelöst, wenn die Eingabe unscharf ist. Woher weiß ich also sofort, wann ein Textfeld seinen Wert geändert hat?

Jeriko
quelle
2
Warum also nicht beide keyupund pasteEreignisse binden ?
Ilia G
devcurry.com/2009/07/… - Erkennen von Ausschneiden / Kopieren / Einfügen-Ereignissen
BeRecursive
2
@ liho1eye pasteist nur eine, an die ich gedacht habe. Ich würde lieber auf eine endgültige Änderung hören, als an all die verschiedenen eingehenden Pfade denken zu müssen.
Jeriko
@ Jeriko Dies ist die einzige Möglichkeit, den Wert auf zwei Arten zu ändern (neben der offensichtlichen Aktualisierung über js-Code).
Ilia G
Sie möchten auch Ctlr-X ( cut) erfassen .
Alexis Wilke

Antworten:

340

Denken Sie nur daran, dass 'on' über die 'bind'-Funktion empfohlen wird. Versuchen Sie also immer, einen Ereignis-Listener wie diesen zu verwenden:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});
Alejandro Silva
quelle
Warum pasteaber? Zuerst dachte ich, dass es nur funktioniert, wenn wir etwas einfügen CTRL+V.
Schwarz
3
@ NicolasS.Xu: direkte Zuweisung von Werten löst kein DOM-Ereignis aus
Alejandro Silva
Wäre noch besser, wenn console.log()statt alert. Wäre sehr ärgerlich für die Eingabe von alert.
Cytsunny
4
@cytsunny ja sicher, Warnung ist ärgerlich, aber in diesem Fall ist ein Beispiel für den Code, der bei der Wertänderung ausgeführt werden soll, es kann wirklich jede gewünschte Nutzlast sein.
Alejandro Silva
1
Wenn Sie mit der rechten Maustaste klicken und einfügen, wird der Wert der Eingabe vor dem Einfügen zurückgegeben.
Alstr
104

Beschreibung

Sie können dies mit der .bind()Methode von jQuery tun . Schauen Sie sich die jsFiddle an .

Stichprobe

Html

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

jQuery

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

Mehr Informationen

dknaack
quelle
6

Sie können auch Textbox-Ereignisse verwenden -

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

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

Versuche dies

Ishan Jain
quelle
5

Versuche dies:

Berücksichtigen Sie einfach jedes Ereignis:

Html:

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

Jquery:

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

$("#textbox").change(function() { 
alert($(this).val());  
}); 
H Bellamy
quelle
3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

Wählen Sie für Browser-Vorschlag

mohamad yazdanpanah
quelle
2

Versuche dies:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})
Hamed Khosravi
quelle
0

Verwenden Sie dies: https://github.com/gilamran/JQuery-Plugin-AnyChange

Es behandelt alle Möglichkeiten zum Ändern der Eingabe, einschließlich des Inhaltsmenüs (mit der Maus).

Gilamran
quelle
Wie benutzt man es? Ich habe es in mein HTML aufgenommen und $ ("input") verwendet. AnyChange (function (e) {console.log (e);}); Aber es kam nie zur console.log-Zeile
Ofer Gal
0

Diese Kombination von Ereignissen hat bei mir funktioniert:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});
Nole
quelle
0

VERGESSEN SIE NICHT DIE cutoder selectEREIGNISSE!

Die akzeptierte Antwort ist fast perfekt, vergisst aber die cutund selectEreignisse.

cut wird ausgelöst, wenn der Benutzer Text schneidet (STRG + X oder per Rechtsklick)

select wird ausgelöst, wenn der Benutzer eine vom Browser vorgeschlagene Option auswählt

Sie sollten sie auch als solche hinzufügen:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
Oscar Chambers
quelle