¿Detectando cambios de entrada en jQuery?
Al usar jquery .changeen uninput evento, solo se activará cuando la entrada pierda el foco.
En mi caso, necesito realizar una llamada al servicio (verificar si el valor es válido) tan pronto como se cambie el valor de entrada. ¿Cómo podría lograr esto?
ACTUALIZADO para aclaración y ejemplo.
ejemplos: http://jsfiddle.net/pxfunc/5kpeJ/
Método 1. inputevento
En los navegadores modernos se utiliza el inputevento. Este evento se activará cuando el usuario escriba en un campo de texto, pegue, deshaga, básicamente cada vez que el valor cambie de un valor a otro.
En jQuery hazlo así
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
comenzando con jQuery 1.7, reemplace bindcon on:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
Método 2. keyupevento
Para navegadores más antiguos, utilice el keyupevento (esto se activará una vez que se haya liberado una tecla del teclado, este evento puede dar una especie de falso positivo porque cuando se suelta "w" el valor de entrada cambia y el keyupevento se activa, pero también cuando se Si se suelta la tecla "shift", se keyupactiva el evento pero no se ha realizado ningún cambio en la entrada). Además, este método no se activa si el usuario hace clic derecho y pega desde el menú contextual:
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
Método 3. Temporizador ( setIntervalo setTimeout)
Para sortear las limitaciones, keyuppuede configurar un temporizador para verificar periódicamente el valor de la entrada para determinar un cambio en el valor. Puede utilizar setIntervalo setTimeoutpara realizar esta comprobación del temporizador. Vea la respuesta marcada en esta pregunta SO: evento de cambio de cuadro de texto de jQuery o vea el violín para ver un ejemplo práctico usando eventos focusy blurpara iniciar y detener el temporizador para un campo de entrada específico
Si tienes HTML5:
oninput(se activa sólo cuando realmente ocurre un cambio, pero lo hace inmediatamente)
De lo contrario, deberá verificar todos estos eventos que podrían indicar un cambio en el valor del elemento de entrada:
onchangeonkeyup( nokeydownokeypressya que el valor de la entrada aún no tendrá la nueva pulsación de tecla)onpaste(cuando sea compatible)
y tal vez:
onmouseup(No estoy seguro de este)
Con HTML5 y sin usar jQuery, puedes usar el inputevento :
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
Esto se activará cada vez que cambie el texto de la entrada.
Compatible con IE9+ y otros navegadores.
Pruébelo en vivo en jsFiddle aquí .
Como ya sugirieron otros, la solución en su caso es detectar múltiples eventos .
Los complementos que realizan este trabajo suelen escuchar los siguientes eventos:
$input.on('cambiar teclapresionar tecla arriba mousedown clic mouseup', controlador);
Si cree que puede encajar, puede agregar focusy blurotros eventos también.
Sugiero no excederse en los eventos a escuchar, ya que carga en la memoria del navegador procedimientos adicionales para ejecutar de acuerdo con el comportamiento del usuario.
Atención: tenga en cuenta que cambiar el valor de un elemento de entrada con JavaScript (por ejemplo, mediante el .val()método jQuery) no activará ninguno de los eventos anteriores.
(Referencia: https://api.jquery.com/change/ ).
