Wie kann ich Onchange von mit jQuery implementieren?

StackOverflow https://stackoverflow.com/questions/1443292

  •  22-07-2019
  •  | 
  •  

Frage

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

War es hilfreich?

Lösung

Sie können mit .change() 

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

Allerdings wird dieses Ereignis nur ausgelöst, wenn der Wähler Fokus verloren hat, so dass Sie woanders müssen klicken, um diese Arbeit zu haben.

Wenn das nicht ganz richtig für Sie, könnten Sie einige der anderen jQuery Ereignisse verwenden wie keyup , keypress -. abhängig von dem genauen gewünschten Effekt

Andere Tipps

Wie @pimvdb sagte in seinem Kommentar,

  

diese Änderung Hinweis wird nur ausgelöst, wenn das Eingangselement Fokus verloren hat.   Es gibt auch den Eingang Ereignis, das ausgelöst wird, wenn die Textbox Updates   ohne sie benötigen Fokus zu verlieren. es funktioniert auch im Gegensatz zu Schlüsselereignissen für   Einfügen / Ziehen Text.

(Siehe Dokumentation .)

Das ist so nützlich, es wert ist es in einer Antwort setzen. Zur Zeit (v1.8 *?) Gibt es keine .input () Bequemlichkeit in jquery fn, so dass die Art und Weise, es zu tun ist 

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

Ich würde vorschlagen, das KeyUp-Ereignis so etwas wie unten mit: 

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

Es gibt ein paar Möglichkeiten, um das gleiche Ergebnis zu erzielen, damit ich denke, es ist bis auf Präferenz und hängt davon ab, wie Sie es wollen, genau arbeiten.

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

.

Für kopieren und einfügen würde ich empfehlen Ihnen: 

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

Hier ist der Code, den ich verwenden: 

$("#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, vor allem, wenn sie mit einer jqGrid Kontrolle gepaart. Sie können einfach in ein Textfeld eingeben und sofort sehen die Ergebnisse in Ihrem jqGrid.

Es ist ein und nur ein zuverlässiger Weg, um diesen zu tun, und es ist durch den Wert in einem Intervall ziehen und es zu einem Cache gespeicherten Wert verglichen wird.

Der Grund, warum dies der einzige Weg ist, weil es mehr Möglichkeiten gibt, ein Eingabefeld mit verschiedenen Eingaben (Tastatur, Maus, Einfügen, Browser-History, voiceinput etc.) zu ändern, und man kann nie alle von ihnen unter Verwendung von Standardereignissen erfassen in einer Cross-Browser-Umgebung.

Zum Glück, dank der Event-Infrastruktur in jQuery, ist es ganz einfach, Ihr eigenes INPUTCHANGE Ereignis hinzuzufügen. Ich tat es hier: 

$.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 mögen: $('input').on('inputchange', function() { console.log(this.value) });

Es gibt eine Demo hier: http://jsfiddle.net/LGAWY/

Wenn Sie Angst vor mehreren Intervallen sind, können Sie binden / unbind dieses Ereignis auf focus / 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 );
});

I Verwendung this Stichwort empfehlen, um Zugriff auf das gesamte Element zu erhalten, damit Sie alles tun können sind Sie mit diesem Elemente benötigen. 

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

Im Folgenden wird auch funktionieren, wenn es dynamisch / Ajax-Aufrufe.

Script: 

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

Html, 

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

Ich hoffe, dass diese Arbeits Code jemand helfen wird, die dynamisch / Ajax-Aufrufe zuzugreifen versucht ...

Sie können einfach mit der ID arbeiten 

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

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

Das funktionierte für mich. Wenn das Feld mit dem Namen FieldA geklickt wird oder eine beliebige Taste eingegeben es aktualisiert Feld mit der ID FieldB . 

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

Sie könnten verwenden .keypress() .

Betrachten wir zum Beispiel die HTML: 

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

Der Event-Handler kann in das Eingabefeld gebunden werden: 

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

ich total mit Andy zustimmen; Alles hängt davon ab, wie Sie es arbeiten wollen.

Sie können dies auf unterschiedliche Weise, keyup ist einer von ihnen. Aber ich gebe Beispiel unten mit auf Veränderung. 

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

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top