¿El evento de cambio de cuadro de texto jQuery no se activa hasta que el cuadro de texto pierde el foco?


133

Descubrí que el evento de cambio de jQuery en un cuadro de texto no se activa hasta que hago clic fuera del cuadro de texto.

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

Ver demostración en JSFiddle

Mi aplicación requiere que el evento se active en cada cambio de carácter en el cuadro de texto. Incluso intenté usar keyup en su lugar ...

$("#textbox").keyup(function() {alert("Keyup detected!");});

... pero es un hecho conocido que el evento keyup no se activa al hacer clic con el botón derecho y pegar.

¿Alguna solución? ¿Tener ambos oyentes va a causar algún problema?


^^ Esto. Puede tener tantos controladores de eventos como desee.
Reinstale a Monica Cellio el

Respuestas:


298

La vinculación a ambos eventos es la forma típica de hacerlo. También puede vincularse al evento pegar.

Puede vincularse a múltiples eventos como este:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

Si desea ser pedante al respecto, también debe unirse al mouseup para atender el arrastre de texto y agregar una lastValuevariable para asegurarse de que el texto realmente haya cambiado:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

Y si desea ser super duperpedante, debe usar un temporizador de intervalo para atender el llenado automático, los complementos, etc.

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

9
¡Finalmente alguien leyó la pregunta y respondió todo!
Vuelva a instalar a Monica Cellio el

44
.on('change keyup paste', function() {...}en realidad dispara varias veces! Si escribí un carácter y luego hice clic afuera, los eventos 'cambio' y 'keyup' se activan, lo que lleva a que la función se ejecute varias veces. Si hago clic con el botón derecho en pegar y luego hago clic afuera, 'cambiar' y 'pegar' se activan. ¡Infierno! ¡Al usar Ctrl + V para pegar y luego hacer clic afuera dispara tres veces!
SNag

1
@SNag sí, así que también debe agregar un cheque usando una lastValuevariable para asegurarse de que realmente haya cambiado.
Petah

1
+1. Sin embargo, ¿es vinculante 'cambiar' incluso necesario aquí? No está claro para mí qué caso manejaría eso que ya no se habría manejado para el momento en que se disparó (cambio).
Madbreaks

1
El evento pegar se activa antes de que el texto se pegue realmente
developerbmw

85

En los navegadores modernos, puede usar el inputevento :

MANIFESTACIÓN

$("#textbox").on('input',function() {alert("Change detected!");});

1
Bien, no estaba al tanto de eso. ¿Es una cosa HTML5?
Reinstale a Monica Cellio el

44
Me hubiera encantado aceptar esta respuesta, pero como dijiste, esta es una solución para los navegadores modernos. Mi aplicación web está dirigida a usuarios que todavía usan IE8, y esto no funciona en IE8. :( ¿Qué puedo decir .. :(
SNag

No se dispara si, por ejemplo, selecciona todo el texto y presiona la tecla Suprimir
jjxtra

4
$(this).bind('input propertychange', function() {
        //your code here
    });

Esto funciona para escribir, pegar, hacer clic con el botón derecho del mouse, etc.


1
Esta parece ser la mejor solución porque no dispara múltiples eventos si haces algo como presionar la flecha hacia arriba en un campo numérico.
Justin

Solución simple y eficiente
Abdulhameed

4
if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

2

Prueba esto:

$("#textbox").bind('paste',function() {alert("Change detected!");});

Ver demostración en JSFiddle .


Como la pregunta es sobre pegar, no funciona. el evento no se activa al hacer clic con el botón derecho y pegar.
Dhaval Marthak

¿Y qué tiene que ver eso con el uso de bind()?
Reinstale a Monica Cellio el

dijo que el evento keyup no se activa al botón derecho del ratón + pegar en él, así keyupy change()tiene su propio comportamiento típico por lo que quiere Identificación del evento para ejecutar a continuación, pastepodría ser la opción
Dhaval Marthak

Por supuesto, pero eso todavía no responde por qué el uso de en bindlugar de on.
Reinstale a Monica Cellio el

0

Pruebe el siguiente código:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

¿Cómo captura eso pegar con el mouse, como se menciona en la pregunta?
Reinstale a Monica Cellio el

la pulsación de teclas es adecuada ya que dijo esoevent to be fired on every character change in the textbox
Venkat.R

Si hubiera leído toda la pregunta, vería que él también dijo:"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."
Vuelva a instalar a Monica Cellio el

0

Leer tus comentarios me llevó a una solución sucia. Esta no es una manera correcta, lo sé, pero puede ser una solución.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.