Respuestas:
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.
change
solo se disparará cuando el elemento de entrada haya perdido el foco. También existe el input
evento 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.
change
no es compatible con IE9, puede usar focusout
para tener el mismo comportamiento
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!')
});
$('form').on('change input', function);
fue el truco para mí. Gracias.
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 jqGrid
control. 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
.
$('body').on('inputchange', 'input', function() { console.log(this.value) });
:? O no, como se menciona aquí: github.com/EightMedia/hammer.js/pull/98 ?
<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 this
palabras 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 ...
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() { ... });
$(document).on('change', 'input[name=myInput]', function() { ... });
$("input").change(function () {
alert("Changed!");
});
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.