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?


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()); 
});

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



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


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());  
}); 

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

Wählen Sie für Browser-Vorschlag


2

Versuche dies:

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


0

Diese Kombination von Ereignissen hat bei mir funktioniert:

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

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 
});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.