L'evento di modifica della casella di testo jQuery non si attiva fino a quando la casella di testo non viene disattivata?

Ho scoperto che l'evento di modifica jQuery su una casella di testo non si attiva finché non faccio clic all'esterno della casella di testo.

HTML:

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

JS:

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

Guarda la demo su JSFiddle

La mia applicazione richiede che l'evento venga attivato su ogni cambio di carattere nella casella di testo. Ho anche provato a usare il keyup invece ...

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

... ma è risaputo che l'evento keyup non viene generato facendo clic con il pulsante destro del mouse.

Qualche soluzione? Avere entrambi gli ascoltatori causerà qualche problema?

Associare entrambi gli eventi è il modo tipico di farlo. Puoi anche associare l'evento incolla.

Puoi associare più eventi come questo:

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

Se vuoi essere pedante al riguardo, dovresti anche associarti al mouse per provvedere al trascinamento del testo e aggiungere una lastValuevariabile per assicurarti che il testo sia effettivamente cambiato:

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');
    }
});

E se vuoi essere super duperpedante, dovresti usare un timer intervallo per soddisfare il riempimento automatico, i plugin, ecc:

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);

Sui browser moderni, puoi utilizzare l' inputevento :

DEMO

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

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

Funziona per digitare, incollare, fare clic con il tasto destro del mouse, ecc.

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>

Prova questo:

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

Guarda la demo su JSFiddle .

Prova il codice seguente:

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

Leggere i tuoi commenti mi ha portato a una soluzione sporca. Questo non è un modo giusto, lo so, ma può essere una soluzione.

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