Come posso ottenere il NUOVO valore di un input di testo HTML durante un evento keypress tramite jQuery?

Question

Posso solo recuperare il valore senza il tasto premuto di recente. L'utilizzo dell'evento keyup non è un'opzione, perché non si attiva se l'utente non rilascia la chiave. Questo è importante perché voglio agire su ogni singolo tasto.

Combinare il vecchio valore con il codice chiave che è raggiungibile dagli argomenti dell'evento non è accettabile, perché non è garantito che l'utente digiti alla fine della stringa nella casella di testo.

Answer 1

È possibile calcolare quale sarà il valore dopo la pressione del tasto. E 'facile in browser diversi da IE e più complicato in IE, ma quanto segue lo farà:

document.getElementById("your_input").onkeypress = function(evt) { 
    var val = this.value; 
    evt = evt || window.event; 
    var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode; 
    if (charCode) { 
     var keyChar = String.fromCharCode(charCode); 
     var start, end; 
     if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") { 
      start = this.selectionStart; 
      end = this.selectionEnd; 
     } else if (document.selection && document.selection.createRange) { 
      // For IE up to version 8 
      var selectionRange = document.selection.createRange(); 
      var textInputRange = this.createTextRange(); 
      var precedingRange = this.createTextRange(); 
      var bookmark = selectionRange.getBookmark(); 
      textInputRange.moveToBookmark(bookmark); 
      precedingRange.setEndPoint("EndToStart", textInputRange); 
      start = precedingRange.text.length; 
      end = start + selectionRange.text.length; 
     } 
     var newValue = val.slice(0, start) + keyChar + val.slice(end); 
     alert(newValue); 
    } 
}; 

Answer 2

Avvolgere il codice gestore in setTimeout(function() { ... }, 0).

Questo eseguirà il codice nel ciclo successivo del messaggio, dopo che lo value è stato aggiornato.

Answer 3

Ecco un'idea che potrebbe funzionare. Utilizzare la pressione del tasto e memorizzare la val in quel punto in modo da poter sempre confrontare il valore corrente con l'ultimo valore e trovare la differenza nelle stringhe. La differenza sarà la chiave che è stata premuta.

Un modo per farlo sarebbe quello di trasformare le stringhe in array e confrontare le 2 matrici come stanno facendo qui: JavaScript array difference

Non ha mai fatto nulla di simile quindi potrebbe non essere fattibile, ma forse vale la pena un colpo .

Answer 4

ho avuto un caso specifico con TAB, che cambia l'e.target in keyUp, in modo che la soluzione - si legano ai elemento contenitore, cattura l'input di destinazione nel gestore keyDown, iscriviti a keyUp e leggi il valore.

$("#container").keydown(function (e) { 
    //here you decide whether to handle the key event, and grab the control that sent the event 
    var myInput = e.target; 
    $("#container").one('keyup', function() { 
     console.log(myInput.val()); 
     // do smth here 
    }); 
});