poner - El evento de cambio de jQuery textbox no se activa hasta que textbox pierde el foco?

poner el foco en un input jquery

Question

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

HTML:

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

JS:

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

Vea la 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 de teclado no se activa con clic derecho y pegar.

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

Answer 1

En los navegadores modernos, puede usar el evento de input :

DEMO

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

Answer 2

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

Puede enlazar a múltiples eventos como este:

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

Si quisieras ser pedante al respecto, también deberías enlazar con mouseup para atender el arrastre de texto y agregar una lastValue variable de valor para asegurarte de que el texto realmente cambió:

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 quieres ser super duper , debes usar un temporizador de intervalo para atender el autocompletado, 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);

Answer 3

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

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});

Answer 4

Prueba el siguiente código:

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

Answer 5

Prueba esto:

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

Vea la demostración en JSFiddle .

Answer 6

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

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

Answer 7

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>