¿Cómo implemento el cambio de < input type = & # 8220; text & # 8221; > con jQuery?

Question

< select > tiene esta API. ¿Qué pasa con < input > ?

Answer 1

Puede 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 jQuery como keyup , keydown o keypress , dependiendo del efecto exacto que desee.

Answer 2

Como dijo @pimvdb en su comentario,

  

Tenga en cuenta que el cambio solo se activará cuando el elemento de entrada haya perdido el foco.   También existe el evento de entrada que se activa cada vez que se actualiza el cuadro de texto   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!')
});

Answer 3

Sugeriría usar el evento keyup de la siguiente manera:

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

Answer 4

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 control jqGrid . Simplemente puede escribir en un cuadro de texto y inmediatamente ver los resultados en su jqGrid .

Answer 5

Hay una y única 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 múltiples 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 un entorno de navegador cruzado.

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

Aquí hay una demostración: http://jsfiddle.net/LGAWY/

Si tiene miedo de varios intervalos, puede vincular / desvincular este evento en focus / blur .

Answer 6

<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 la palabra clave this para obtener acceso a todo el elemento para que pueda hacer todo lo que necesita con este elemento.

Answer 7

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

Answer 8

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

Script:

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

Answer 9

Simplemente podría trabajar con la identificación

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

Answer 10

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

Answer 11

Esto funcionó para mí. Si se hace clic en el campo con el nombre campoA o se ingresa cualquier tecla, se actualiza el campo con la identificación campoB .

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

Answer 12

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

Answer 13

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 "] reemplace con su input ID o nombre .