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

174

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

Oh mein Gott
quelle

Antworten:

219

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.

Greg
quelle
Leider funktioniert dies bei versteckten Eingaben nicht. Eine mögliche Lösung, wenn eine Änderung an einer versteckten Eingabe erforderlich ist, ist: <input type = 'text' style = 'display: none' /> (mit CSS).
NickGreen
302
Beachten Sie, dass dies changenur ausgelöst wird, wenn das Eingabeelement den Fokus verloren hat. Es gibt auch das inputEreignis, 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.
Pimvdb
4
Toller Kommentar @pimvdb. Ich habe das benutzt und daraus eine Antwort auf diese Frage gemacht.
iPadDeveloper2011
1
Während ich dies versuche und gerade erfahren habe, dass das Ereignis nur ausgelöst wird, wenn zwei Bedingungen erfüllt sind: 1) Wertänderung; und 2) Unschärfe, ich frage mich, ob das, was viele Leute von change () erwarten, besser mit keyup () gehandhabt wird.
TARKUS
Da changedies von IE9 nicht unterstützt wird, können Sie focusoutdasselbe Verhalten verwenden
Soma
247

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!')
});
iPadDeveloper2011
quelle
6
Insbesondere IE <9 unterstützt überhaupt nicht.
dlo
13
Da Sie an mehrere Ereignisse binden können, $('form').on('change input', function);hat der Trick für mich getan. Vielen Dank.
Justnorris
9
@Norris. Das wird wahrscheinlich zweimal ausgelöst, wenn ein Element geändert wird (1.) und den Fokus verliert (2.). Das ist für viele Zwecke kein Problem, aber dennoch erwähnenswert.
iPadDeveloper2011
Bei IE9 getestet, wird die
Rücktaste
Beachten Sie, dass dies für jede vorgenommene Eingabeänderung ausgelöst wird (nach der Sie möglicherweise suchen). Wenn Sie jedoch nach einem Ereignis wie "Wenn Sie mit dem Ändern fertig sind" suchen, finden Sie hier ein gutes Beispiel .
Trevor Nestman
79

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
});
Andrew
quelle
Ich empfehle dieses auf jeden Fall für Texteingaben!
Vercas
20
Der Inhalt des Eingabeelements kann geändert werden, ohne dass ein Keyup ausgelöst wird. Sie können beispielsweise Text mit der Maus einfügen.
Celicni
Außerdem scheint noch eine Änderung erforderlich zu sein, um Kontrollkästchen zu erfassen
turbo2oh
30

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.

Mike Gledhill
quelle
22

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.

David Hellsing
quelle
Ist es möglich, dass Ihr Code so funktioniert : $('body').on('inputchange', 'input', function() { console.log(this.value) });? Oder nicht, wie hier erwähnt: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost
13
Das Schreiben und Starten eines solchen Codes ist ein Wahnsinn mit extremen Auswirkungen auf die Leistung.
Danubian Sailor
@ ŁukaszLech Bitte erzähl mir davon. Wenn Sie jedoch die Fokus- / Unschärfeereignisse treffen, wie bereits erwähnt, wird das Intervall nur vorübergehend ausgeführt. Sicherlich kann sogar ein Intel 386 von 1988 ein einziges Intervall verarbeiten?
David Hellsing
5
<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.

Entwickler
quelle
4

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 ...

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

Sie könnten einfach mit der ID arbeiten

$("#your_id").on("change",function() {
    alert(this.value);
});
Siddhesh Mishra
quelle
Dies trägt nicht viel zu den vorhandenen Antworten bei.
Pang
2

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 .

Rokan Nashp
quelle
2

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() { ... });
Usman Ahmed
quelle
Aus irgendeinem Grund hat das bei mir nicht funktioniert, aber das hat funktioniert:$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan
1
@Stefan, der Code in Ihrem Beispiel heißt Ereignisdelegation. Ihre Eingabefelder müssen sich nach der Seiteninitialisierung summiert haben, deshalb hat mein Code bei Ihnen nicht funktioniert.
Usman Ahmed
1
$("input").change(function () {
    alert("Changed!");
});
Georg Schölly
quelle
4
Das Problem dieser Option ist, dass nur funktioniert, wenn Sie den Eingabefokus verloren haben
Yises
Das wird in einigen Fällen noch passen.
James Drinkard
1

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

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.

kcho0
quelle
1
Dies funktioniert nicht beim Kopieren / Einfügen. Es wird kein Ereignis ausgelöst, wenn Text mit einem Mausklick eingefügt wird.
DaveN59