Wie wird ein JQuery-Änderungsereignis ausgelöst, wenn der Eingabewert programmgesteuert geändert wird?

Lesezeit: 2 Minuten

Benutzer-Avatar
Mohammed

Ich möchte die JQuery feuern change Ereignis, wenn der Eingabetext programmgesteuert geändert wird, zum Beispiel so:

$("input").change(function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Aber es funktioniert nicht. Wie kann ich das zum Laufen bringen?

Benutzer-Avatar
Pranav C. Balan

Das Änderungsereignis wird nur ausgelöst, wenn der Benutzer etwas in die Eingabe eingibt und dann den Fokus verliert.

Sie müssen das Ereignis manuell mit auslösen change() oder trigger('change')

$("input").change(function() {
  console.log("Input text changed!");
});
$("input").val("A").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />

  • ist dies eine Voraussetzung, um .change() aufzurufen, nachdem Sie .val() der Eingabe programmgesteuert geändert haben? Ich finde das, wenn ich .val() programmgesteuert ändere und .focus() setze, damit ich den Cursor am Ende des Mehrwerttextes platzieren kann. und klicken Sie dann außerhalb der Eingabe. er löscht die eingabe…

    – Akin Hwan

    22. August 2019 um 21:42 Uhr

  • @AkinHwan: change() Methode ruft zum Auslösen der Methode programmgesteuert auf, da val() -Methode löst das Änderungsereignis nicht aus

    – Pranav C. Balan

    23. August 2019 um 4:56 Uhr

Der Ereignishandler .change() verhält sich wie eine Formularübermittlung – im Grunde wird die Konsole protokollieren, wenn sich der Wert beim Absenden ändert. Um sich bei der Texteingabe zu verhalten, möchten Sie die Eingabe wie unten verwenden:

$("input").on('input', function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Was Sie tun müssen, ist die auszulösen change Ereignis, nachdem Sie den Text festgelegt haben. Sie können also eine Funktion dafür erstellen, damit Sie sie nicht jedes Mal wiederholen müssen, wenn Sie den Text aktualisieren müssen, wie folgt:

function changeTextProgrammatically(value) {
    $("input").val( value );
    $("input").trigger( 'change' ); // Triggers the change event
}

changeTextProgrammatically( "A" );

Ich habe die aktualisiert Geige,

Sie können das DOMSubtreeModified-Ereignis verwenden:

$('input').bind('DOMSubtreeModified',function(){...})

Wenn Sie feuern wollen beide Benutzer- und Codeänderungen:

$('input').bind('input DOMSubtreeModified',function(){...})

Dieses Ereignis ist als veraltet markiert und manchmal ziemlich CPU-zeitaufwändig, aber es kann auch sehr effizient sein, wenn es sorgfältig verwendet wird …

jquery change event funktioniert nur, wenn der Benutzer in die Eingabe eintippt und dann den Fokus verliert. Sie können dazu die folgende Problemumgehung verwenden: Angenommen, Sie haben eine Schaltfläche, auf die geklickt wird, was zu einer Änderung des Eingabewerts führt. (das könnte auch alles andere sein als ein Knopf)

var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
   //do something
  }
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})

1016120cookie-checkWie wird ein JQuery-Änderungsereignis ausgelöst, wenn der Eingabewert programmgesteuert geändert wird?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy