it-swarm.com.de

Wie implementiere ich onchange of <input type = "text"> mit jQuery?

<select> verfügt über diese API. Was ist mit <input>?

155
omg

Sie können .change() verwenden.

$('input[name=myInput]').change(function() { ... });

Dieses Ereignis wird jedoch nur ausgelöst, wenn der Auswahlbereich den Fokus verloren hat. Sie müssen also an eine andere Stelle klicken, um diese Arbeit zu erhalten.

Wenn das nicht ganz richtig für Sie ist, können Sie einige der anderen jQuery-Ereignisse like keyup , keydown oder keypress - verwenden, abhängig von der gewünschten Wirkung.

195
Greg

Wie @pimvdb in seinem Kommentar sagte: 

Beachten Sie, dass die Änderung nur ausgelöst wird, wenn das Eingabeelement den Fokus verloren hat . Es gibt auch das Eingabeereignis, das ausgelöst wird, wenn das Textfeld aktualisiert wird ohne dass es den Fokus verlieren muss. Im Gegensatz zu wichtigen Ereignissen funktioniert es auch für Einfügen/Ziehen von Text.

(Siehe Dokumentation .)

Das ist so nützlich, dass es sich lohnt, eine Antwort darauf zu geben. Zur Zeit (v1.8 *?) Gibt es in jquery keine .input () - Bequemlichkeit fn, also ist dies der Weg 

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});
224

Ich würde vorschlagen, das Keyup-Event wie folgt zu verwenden:

$('elementName').keyup(function() {
 alert("Key up detected");
});

Es gibt mehrere Möglichkeiten, das gleiche Ergebnis zu erzielen. Ich denke, es hängt von den Vorlieben ab und hängt davon ab, wie es genau funktionieren soll.

Update: Dies funktioniert nur für die manuelle Eingabe, nicht Kopieren und Einfügen.

Zum Kopieren und Einfügen würde ich folgendes empfehlen:

$('elementName').on('input',function(e){
 // Code here
});
73
Andrew

Hier ist der Code, den ich verwende:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

Das funktioniert ganz gut, besonders wenn es mit einem jqGrid-Steuerelement gekoppelt ist. Sie können einfach ein Textfeld eingeben und sofort die Ergebnisse in Ihrer jqGrid anzeigen. 

27
Mike Gledhill

Es gibt einen und nur einen zuverlässigen Weg, dies zu tun} _, indem der Wert in einem Intervall gezogen und mit einem zwischengespeicherten Wert verglichen wird. 

Dies ist der einzige Grund, warum dies der einzige Weg ist, weil es mehrere Möglichkeiten gibt, ein Eingabefeld mit verschiedenen Eingaben (Tastatur, Maus, Einfügen, Browserverlauf, Spracheintrag usw.) zu ändern, und Sie können niemals alle mit Standardereignissen in einem Kreuz erkennen -Browserumgebung.

Glücklicherweise ist es dank der Event-Infrastruktur in jQuery sehr einfach, ein eigenes Inputchange-Event hinzuzufügen. Ich habe es hier gemacht:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

Verwenden Sie es wie folgt: $('input').on('inputchange', function() { console.log(this.value) });

Hier gibt es eine Demo: http://jsfiddle.net/LGAWY/

Wenn Sie Angst vor mehreren Intervallen haben, können Sie dieses Ereignis für focus/blur binden/aufheben.

22
David Hellsing
<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

Ich empfehle this, um Zugriff auf das gesamte Element zu erhalten, damit Sie alles, was Sie mit diesem Element benötigen, ausführen können.

Das Folgende funktioniert auch, wenn es sich um dynamische Ajax-Aufrufe handelt.

Skript:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

Html,

<input class="addressCls" type="text" name="address" value="" required/>

Ich hoffe, dass dieser Arbeitscode jemandem hilft, der versucht, dynamisch auf Ajax-Aufrufe zuzugreifen.

3
Vinith
$("input").keyup(function () {
    alert("Changed!");
});
3
Phu

Sie könnten einfach mit der ID arbeiten 

$("#your_id").on("change",function() {
    alert(this.value);
});
2
Siddhesh Mishra

Das hat bei mir funktioniert. Wenn ein Feld mit dem Namen fieldA angeklickt oder ein Schlüssel eingegeben wird, wird das Feld mit der ID fieldB aktualisiert.

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});
1
Seefan
$("input").change(function () {
    alert("Changed!");
});
1
Georg Schölly

Sie könnten .keypress() verwenden.

Betrachten Sie zum Beispiel den HTML-Code:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

Der Event-Handler kann an das Eingabefeld gebunden sein:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

Ich stimme absolut mit Andy überein. alles hängt davon ab, wie es funktionieren soll.

1
kcho0

Sie können dies auf verschiedene Arten tun, keyup ist eine davon. Aber ich gebe ein Beispiel mit Änderung. 

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

NB: input [name = "vat_id"] durch Ihre Eingabe ersetzenIDoder name .

0
Rokan Nashp