¿Cómo implemento onchange de <input type = "text"> con jQuery?

<select>tiene esta API ¿Qué hay de <input>?

Puedes usar .change()

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

Sin embargo, este evento solo se activará cuando el selector haya perdido el foco, por lo que deberá hacer clic en otro lugar para que funcione.

Si eso no es lo más adecuado para usted, puede usar algunos de los otros eventos de jQuery como keyup , keydown o keypress , dependiendo del efecto exacto que desee.

Como @pimvdb dijo en su comentario:

Tenga en cuenta que el cambio solo se activará cuando el elemento de entrada haya perdido el foco. También está el evento de entrada que se dispara cada vez que el cuadro de texto se actualiza sin necesidad de perder el foco. A diferencia de los eventos clave, también funciona para pegar / arrastrar texto.

(Ver documentación ).

Esto es muy útil, vale la pena ponerlo en una respuesta. Actualmente (v1.8 *?) No hay conveniencia .input () fn en jquery, por lo que la forma de hacerlo es

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

Sugeriría usar el evento de keyup algo como a continuación:

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

Hay algunas formas de lograr el mismo resultado, así que supongo que depende de las preferencias y depende de cómo quieras que funcione exactamente.

Actualización: esto solo funciona para la entrada manual, no para copiar y pegar.

Para copiar y pegar, recomendaría lo siguiente:

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

Aquí está el código que uso:

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

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

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

Esto funciona bastante bien, particularmente cuando se combina con un jqGridcontrol. Simplemente puede escribir en un cuadro de texto e inmediatamente ver los resultados en su jqGrid.

Hay una y solo una forma confiable de hacer esto , y es al extraer el valor en un intervalo y compararlo con un valor almacenado en caché.

La razón por la cual esta es la única forma es porque hay varias formas de cambiar un campo de entrada usando varias entradas (teclado, mouse, pegar, historial del navegador, entrada de voz, etc.) y nunca puede detectarlas todas usando eventos estándar en una cruz. -ambiente del navegador.

Afortunadamente, gracias a la infraestructura de eventos en jQuery, es bastante fácil agregar su propio evento inputchange. Lo hice aquí:

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

Úselo como: $('input').on('inputchange', function() { console.log(this.value) });

Hay una demostración aquí: http://jsfiddle.net/LGAWY/

Si tiene miedo de varios intervalos, puede vincular / desvincular este evento en 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 );
});

Recomiendo usar thispalabras clave para obtener acceso a todo el elemento para que pueda hacer todo lo que necesita con este elemento.

Lo siguiente funcionará incluso si se trata de llamadas dinámicas / Ajax.

Guión:

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

Html,

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

Espero que este código de trabajo ayude a alguien que está intentando acceder dinámicamente / llamadas Ajax ...

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

Podrías simplemente trabajar con la identificación

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

Puede hacer esto de diferentes maneras, keyup es una de ellas. Pero estoy dando un ejemplo a continuación con el cambio.

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

NB: input [name = "vat_id"] reemplaza con tu ID o nombre de entrada .

Si desea activar el evento mientras escribe , use lo siguiente:

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

Si desea activar el evento al salir del campo de entrada , use lo siguiente:

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

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

Esto funcionó para mí. Si el campo con el nombre FIELDA se hace clic o cualquier tecla entró actualiza campo con id FIELDB .

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

Podrías usar .keypress() .

Por ejemplo, considere el HTML:

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

El controlador de eventos puede vincularse al campo de entrada:

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

Estoy totalmente de acuerdo con Andy; todo depende de cómo quieras que funcione.