Come posso implementare lo scambio di <input type = “text”> con jQuery?

<select>ha questa API. Che dire <input>?

Puoi usare .change()

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

Tuttavia, questo evento si attiva solo quando il selettore ha perso la messa a fuoco, quindi dovrai fare clic da qualche altra parte per avere questo lavoro.

Se ciò non è giusto per te, potresti usare alcuni degli altri eventi jQuery come keyup , keydown o keypress - a seconda dell'effetto esatto che desideri.

Come ha detto @pimvdb nel suo commento,

Si noti che il cambiamento verrà attivato solo quando l'elemento di input ha perso la messa a fuoco. C'è anche l'evento di input che si attiva ogni volta che la casella di testo si aggiorna senza che sia necessario perdere lo stato attivo. A differenza degli eventi chiave, funziona anche per incollare / trascinare il testo.

(Vedi documentazione .)

Questo è così utile, vale la pena metterlo in una risposta. Attualmente (v1.8 *?) Non esiste alcuna convenienza .input () in jquery, quindi il modo per farlo è

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

Vorrei suggerire di utilizzare l'evento keyup come di seguito:

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

Ci sono alcuni modi per ottenere lo stesso risultato, quindi immagino che dipenda dalle preferenze e dipende da come vuoi che funzioni esattamente.

Aggiornamento: funziona solo per input manuale, non copia e incolla.

Per copia e incolla, consiglierei quanto segue:

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

Ecco il codice che uso:

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

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

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

Funziona abbastanza bene, in particolare se associato a un jqGridcontrollo. Puoi semplicemente digitare in una casella di testo e visualizzare immediatamente i risultati nel tuo jqGrid.

C'è un solo ed unico modo affidabile per farlo , ed è tirando il valore in un intervallo e confrontandolo con un valore memorizzato nella cache.

Il motivo per cui questo è l'unico modo è perché ci sono diversi modi per cambiare un campo di input usando vari input (tastiera, mouse, incolla, cronologia del browser, input vocale ecc.) E non puoi mai rilevarli tutti usando eventi standard in una croce -ambiente browser.

Fortunatamente, grazie all'infrastruttura di eventi in jQuery, è abbastanza facile aggiungere il tuo evento inputchange. L'ho fatto qui:

$.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);
    }
};

Usalo come: $('input').on('inputchange', function() { console.log(this.value) });

C'è una demo qui: http://jsfiddle.net/LGAWY/

Se hai paura di più intervalli, puoi associare / separare questo evento su 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 );
});

Ti consiglio di usare la thisparola chiave per accedere all'intero elemento in modo che tu possa fare tutto il necessario con questo elemento.

Di seguito funzionerà anche se si tratta di chiamate dinamiche / Ajax.

script:

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

html,

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

Spero che questo codice di lavoro possa aiutare qualcuno che sta provando ad accedere in modo dinamico / chiamate Ajax ...

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

Potresti semplicemente lavorare con l'id

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

Puoi farlo in diversi modi, il keyup è uno di questi. Ma sto dando un esempio di seguito con il cambiamento.

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

NB: input [name = "vat_id"] sostituisci con il tuo ID di input o nome .

Se si desidera attivare l'evento durante la digitazione , utilizzare quanto segue:

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

Se si desidera attivare l'evento all'uscita dal campo di input , utilizzare quanto segue:

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

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

Questo ha funzionato per me. Se il campo con il nome FieldA si fa clic o un tasto qualsiasi entrato aggiorna campo con id FieldB .

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

Puoi usare .keypress().

Ad esempio, considera l'HTML:

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

Il gestore eventi può essere associato al campo di input:

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

Sono totalmente d'accordo con Andy; tutto dipende da come vuoi che funzioni.