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

Respuestas:

219

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.

Greg
fuente
Desafortunadamente, esto no funciona para una entrada oculta. Una posible solución cuando se requiere un cambio en una entrada oculta es: <input type = 'text' style = 'display: none' /> (with css) ..
NickGreen
303
Tenga en cuenta que changesolo se disparará cuando el elemento de entrada haya perdido el foco. También existe el inputevento que se activa 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.
pimvdb
44
Gran comentario @pimvdb. Usé esto y lo convertí en una respuesta a esta pregunta.
iPadDeveloper2011
1
Mientras intento esto, y acabo de enterarme de que el evento solo se dispara cuando se cumplen dos condiciones: 1) cambio de valor; y 2) desenfoque, me pregunto si lo que muchas personas esperan del cambio () se maneja mejor con keyup ().
TARKUS
Como changeno es compatible con IE9, puede usar focusoutpara tener el mismo comportamiento
Soma
247

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!')
});
iPadDeveloper2011
fuente
66
En particular, IE <9 no es compatible en absoluto.
dlo
13
Ya que puedes unirte a múltiples eventos, $('form').on('change input', function);fue el truco para mí. Gracias.
justnorris
9
@Norris. Probablemente se disparará dos veces cuando se cambie un elemento (1º) y pierda el foco (2º). Eso no es un problema para muchos propósitos, pero vale la pena señalarlo.
iPadDeveloper2011
Probado en IE9, la retroceso no se activará
activará Jaskey
Tenga en cuenta que esto se activará por cada cambio de entrada realizado (que podría ser lo que está buscando). Pero, si está buscando un evento como "Cuando termine de cambiar", este es un gran ejemplo .
Trevor Nestman
79

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
});
Andrés
fuente
¡Definitivamente recomiendo este para entradas de texto!
Vercas
20
El contenido del elemento de entrada puede cambiarse sin que se active el keyup. Por ejemplo, puede pegar texto con el mouse.
celicni
Además, parece que todavía se requiere un cambio para capturar casillas de verificación
turbo2oh
30

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.

Mike Gledhill
fuente
22

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.

David Hellsing
fuente
¿Es posible hacer que su código funcione así $('body').on('inputchange', 'input', function() { console.log(this.value) });:? O no, como se menciona aquí: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost
13
Escribir y lanzar dicho código es una locura con un impacto extremo en el rendimiento.
Danubian Sailor
@ ŁukaszLech Por favor, cuéntamelo. Pero si golpea los eventos de enfoque / desenfoque como también mencioné, el intervalo solo se ejecutará temporalmente. Seguramente, ¿incluso un intel 386 de 1988 puede manejar un solo intervalo?
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 );
});

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

Desarrollador
fuente
4

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

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

Podrías simplemente trabajar con la identificación

$("#your_id").on("change",function() {
    alert(this.value);
});
Siddhesh Mishra
fuente
Esto no agrega mucho a las respuestas existentes.
Pang
2

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 .

Rokan Nashp
fuente
2

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() { ... });
Usman Ahmed
fuente
Por alguna razón, esto no funcionó para mí, pero sí:$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan
1
@Stefan, el código en su ejemplo se llama delegación de eventos. Sus campos de entrada deben haberse sumado después de la inicialización de la página, por eso mi código no funcionó para usted.
Usman Ahmed
1
$("input").change(function () {
    alert("Changed!");
});
Georg Schölly
fuente
44
El problema de esta opción es que solo funciona cuando ha perdido el foco de entrada
Yises
Eso todavía encajará en algunos casos.
James Drinkard
1

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

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.

kcho0
fuente
1
Esto no funciona para las operaciones de copiar / pegar. No se activa ningún evento si el texto se pega con un clic del mouse.
DaveN59