javascript - change - title css

¿Detectando cambio de entrada en jQuery?

Question

Cuando se usa jquery .change en una input el evento solo se activará cuando la entrada pierda el foco

En mi caso, necesito hacer 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?

Answer 1

// .blur se activa cuando el elemento pierde el foco

$(''#target'').blur(function() {
  alert($(this).val());
});

// Para activar manualmente el uso:

$(''#target'').blur();

Answer 2

Como otros ya han sugerido, la solución en su caso es detectar múltiples eventos .
Los complementos que hacen este trabajo a menudo escuchan los siguientes eventos:

$input.on(''change keydown keypress keyup mousedown click mouseup'', handler);

Si crees que puede encajar, también puedes agregar focus , blur y otros eventos.
Sugiero no exceder en los eventos para escuchar, ya que carga en la memoria del navegador otros procedimientos 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, a través del .val() jQuery .val() ) no activará ninguno de los eventos anteriores.
(Referencia: https://api.jquery.com/change/ ).

Answer 3

Con HTML5 y sin usar jQuery, puedes usar el evento de input :

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ébalo en vivo en un jsFiddle aquí .

Answer 4

Esto cubre cada cambio en una entrada usando jQuery 1.7 y superior:

$(".inputElement").on("input", null, null, callbackFunction);

Answer 5

Hay eventos de jQuery como keyup y keypress que puede usar con elementos HTML de entrada. También puedes usar el evento blur () .

Answer 6

Si desea que el evento se active cada vez que se cambie algo dentro del elemento, puede usar el evento keyup .

Answer 7

Si tienes HTML5:

• oninput (se dispara solo cuando realmente ocurre un cambio, pero lo hace inmediatamente)

De lo contrario, debe verificar todos estos eventos que podrían indicar un cambio en el valor del elemento de entrada:

• onchange
• onkeyup ( no keydown ni keypress ya que el valor de la entrada aún no tendrá la nueva pulsación de tecla)
• onpaste (cuando está soportado)

y tal vez:

• onmouseup (no estoy seguro de esto)

Answer 8

ACTUALIZADO para aclaración y ejemplo.

ejemplos: http://jsfiddle.net/pxfunc/5kpeJ/

Método 1. evento de input

En los navegadores modernos utiliza el evento de input . Este evento se activará cuando el usuario esté escribiendo en un campo de texto, pegando, deshaciendo, básicamente cada vez que el valor cambia de un valor a otro.

En jQuery haz eso así.

$(''#someInput'').bind(''input'', function() { 
    $(this).val() // get the current value of the input field.
});

comenzando con jQuery 1.7, reemplace bind con on :

$(''#someInput'').on(''input'', function() { 
    $(this).val() // get the current value of the input field.
});

Método 2. Evento keyup

Para navegadores más antiguos, use el evento keyup (esto se activará una vez que se haya liberado una tecla en el teclado, este evento puede dar una especie de falso positivo porque cuando se suelta "w" se cambia el valor de entrada y se keyup evento keyup , pero también cuando se suelta la tecla "shift", se keyup evento keyup , 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 ( setInterval o setTimeout )

Para sortear las limitaciones de keyup , puede configurar un temporizador para que verifique periódicamente el valor de la entrada para determinar un cambio en el valor. Puede usar setInterval o setTimeout para realizar esta comprobación del temporizador. Vea la respuesta marcada en esta pregunta SO: evento de cambio de cuadro de texto jQuery o vea el violín para un ejemplo de trabajo usando eventos de focus y blur para iniciar y detener el temporizador para un campo de entrada específico