Wie kann ich den neuen Wert einer HTML-Texteingabe während eines Tastendruckereignisses über jQuery erhalten?

Question

Ich kann den Wert nur ohne die neu gedrückte Taste abrufen. Das keyup-Ereignis ist keine Option, da es nicht ausgelöst wird, wenn der Benutzer den Schlüssel nicht freigibt. Dies ist wichtig, weil ich auf jeden einzelnen Tastendruck reagieren möchte.

Die Kombination des alten Werts mit dem keyCode, der über die Argumente des Ereignisses erreichbar ist, ist ebenfalls nicht akzeptabel, da nicht garantiert ist, dass der Benutzer bis zum Ende der Zeichenfolge im Textfeld schreibt.

Answer 1

Es ist möglich herauszufinden, welcher Wert nach dem Tastendruck sein wird. Es ist einfach, in Nicht-IE-Browser und kniffliger in IE, aber folgende wird es tun:

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

Wickeln Sie Ihre Handler-Code in setTimeout(function() { ... }, 0).

Dadurch wird den Code in der nächsten Nachrichtenschleife ausführen, nachdem die value wird aktualisiert.

Answer 3

Hier ist eine Idee, die funktionieren könnte. Verwenden Sie den Tastendruck und speichern Sie den Wert an diesem Punkt, damit Sie den aktuellen Wert immer mit dem letzten Wert vergleichen und den Unterschied in den Strings finden können. Der Unterschied ist der Schlüssel, der gedrückt wurde.

Eine Möglichkeit, dies zu tun wäre, um die Saiten in Arrays zu drehen und die zwei Arrays vergleichen, wie sie hier tun: JavaScript array difference

versucht, so etwas noch nie so dass es nicht lebensfähig sein könnte, aber vielleicht einen Versuch wert sein .

Answer 4

ich mit TAB-Taste einen konkreten Fall hatte, die die e.target in keyUp ändert, so dass Lösung ist - binden Containerelement, Zieleingabe im keyDown-Handler erfassen, keyUp abonnieren und den Wert lesen.

$("#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 
    }); 
});