Wie kann ich den neuen Wert eines Textfelds auf TastePress überprüfen?

Question

Ich habe ein einziges Formularfeld und muss in der Lage sein, zu erkennen, wann das Feld ändert Neu Wert des Feldes. Ich möchte den Code nur ausführen, wenn der Taste gedrückt wird, den Wert des Textfelds tatsächlich ändert. Hier ist die Lösung, die ich mir ausgedacht habe.

function onkeypress(e) {
  var value = this.value;
  // do something with 
}

function onkeyup(e) {
  if ( e.which == 8 || e.keyCode == 46 ) { // delete or backspace keys
    this.onkeypress(e);
  }
}

Es gibt jedoch nur ein Problem. Onkeypress wird vor dem Aktualisieren des Feldwerts entlassen. Wenn ich also den Wert greife, erhalte ich den vorherigen Wert. Ich würde KeyUp ausschließlich verwenden, wenn ich einen Weg wüsste, zu testen, ob der Schlüssel den Wert geändert hat oder nicht, einige Zeichen (wie die Pfeiltasten) jedoch keinen Einfluss auf den Wert des Feldes haben.

Irgendwelche Ideen?

Answer 1

Die Art und Weise, wie ich das mache prevValue. Speichern Sie am Ende der Taste -Pressefunktion den Wert in dieser Variablen und führen Sie die Funktion nur erneut aus, wenn der Wert nicht dem vorherigen Wert entspricht.

Answer 2

Dies ist einfach. Verwenden Sie einfach OnKeyup anstelle von OnKeypress

Answer 3

haben eine andere bedingte:

if(e.keyCode > 31  && e.keyCode < 127) {
    value = this.value + e;
}

Dies würde jedes ASCII -Symbol mit niedrigem Niveau fangen, das von der Tastatur außerhalb des Spezialschotenbereichs eingegeben wurde.

Bearbeiten: (32 ist Raum)

function onkeyup(e) {        
  if ( e.which == 8 || e.keyCode == 46 ) { // delete or backspace keys 
    switch(e.keyCode) {
      case 32:
      case 48..90:
      case 96..111:
      case 188:
      case 190..192: 
      case 219..222:
          value = this.value + e;
          break;
      default: 
          break;
    }       
    this.onkeypress(e);        
  }        
}

Answer 4

Hier ist meine endgültige Lösung, die eine PrävValue -Variable verwendet, aber den globalen Namespace (Fenster) oder die Eigenschaften des DOM -Elements nicht verschmutzt.

(function() {
  var input = document.getElementById('input_box'),
      prevValue;

  input.onkeyup = function(e) {
    if ( this.value != prevValue ) {
      prevValue = this.value;
      // execute some more code here...
    }
  }
}());

Beachten Sie oben, dass die OnKeyUp -Funktion als Schließung um die Variable vor der PrävValue dient. Dies verhindert die Namespace -Verschmutzung, sodass ich keine globale Variable erstellen oder eine Eigenschaft an das Eingabeelement selbst anhängen muss. Dies ist so elegant wie ich es bekommen kann. Ich habe meine tatsächlich in jQuery geschrieben, dachte aber, die Antwort selbst sollte reines JavaScript sein ...

Answer 5

Es ist eine Art Hack, aber Sie können den vorherigen Wert in eine Eigenschaft des Textfelds einfügen (genannt "expono -Attribute").

function onkeypress(e) {
  this.oldvalue = this.value;
}

function onkeyup(e) {
  if (this.value != this.oldvalue) {
    // do something
  }
}

Answer 6

Sie können den alten Wert aufbewahren und feststellen, ob sich geändert hat:

function keyUpHandle(e) {
  if (this.prevValue && this.prevValue != this.value) {
    // do something
  }
  this.prevValue = this.value;
}