Wie implementiere ich einen Wechsel von <input type = “text”> mit jQuery?

<select>hat diese API. Was ist mit <input>?

Sie können verwenden .change()

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

Dieses Ereignis wird jedoch nur ausgelöst, wenn der Selektor den Fokus verloren hat. Sie müssen daher auf eine andere Stelle klicken, damit dies funktioniert.

Wenn dies für Sie nicht ganz richtig ist, können Sie einige der anderen jQuery-Ereignisse wie Keyup , Keydown oder Tastendruck verwenden - je nach dem gewünschten Effekt.

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 der Fokus verloren gehen muss. Im Gegensatz zu Schlüsselereignissen funktioniert es auch zum Einfügen / Ziehen von Text.

(Siehe Dokumentation .)

Dies ist so nützlich, dass es sich lohnt, eine Antwort darauf zu geben. Derzeit (v1.8 *?) Gibt es in .ququery keine .input () - Convenience-Fn

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

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

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

Es gibt einige Möglichkeiten, um 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 bei manueller Eingabe, nicht beim Kopieren und Einfügen.

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

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

Hier ist der Code, den ich benutze:

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

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

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

Dies funktioniert sehr gut, insbesondere wenn es mit einem jqGridSteuerelement gekoppelt ist . Sie können einfach in ein Textfeld eingeben und die Ergebnisse sofort in Ihrem anzeigen jqGrid.

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

Der Grund, warum dies der einzige Weg ist, besteht darin, dass es mehrere Möglichkeiten gibt, ein Eingabefeld mithilfe verschiedener Eingaben (Tastatur, Maus, Einfügen, Browserverlauf, Voiceinput usw.) zu ändern, und dass Sie niemals alle mithilfe von Standardereignissen in einem Kreuz erkennen können -Browser-Umgebung.

Glücklicherweise ist es dank der Ereignisinfrastruktur in jQuery ganz einfach, ein eigenes Inputchange-Ereignis hinzuzufügen. Ich habe es hier getan:

$.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: $('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 auf focus/ binden / aufheben blur.

<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, das thisSchlüsselwort zu verwenden, um Zugriff auf das gesamte Element zu erhalten, damit Sie mit diesem Element alles tun können, was Sie benötigen.

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, dieser Arbeitscode hilft jemandem, der versucht, dynamisch auf Ajax-Anrufe zuzugreifen ...

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

Sie könnten einfach mit der ID arbeiten

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

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

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

NB: Eingabe [name = "vat_id"] durch Ihre Eingabe- ID oder Ihren Namen ersetzen .

Wenn Sie das Ereignis während der Eingabe auslösen möchten , verwenden Sie Folgendes:

$('input[name=myInput]').on('keyup', function() { ... });

Wenn Sie das Ereignis beim Verlassen des Eingabefelds auslösen möchten , verwenden Sie Folgendes:

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

$("input").change(function () {
    alert("Changed!");
});

Das hat bei mir funktioniert. Wenn auf ein Feld mit dem Namen Feld A geklickt oder ein Schlüssel eingegeben wird, wird das Feld mit der ID Feld B aktualisiert .

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

Du könntest benutzen .keypress() .

Betrachten Sie beispielsweise den HTML-Code:

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

Der Ereignishandler kann an das Eingabefeld gebunden werden:

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

Ich stimme Andy voll und ganz zu. Alles hängt davon ab, wie es funktionieren soll.