Wie kann ich überprüfen den neuen Wert ein text-Feld auf Tastendruck?

Ich habe ein einzelnes Formular Feld und ich muss in der Lage sein zu erkennen, wenn sich das Feld ändert und führen Sie einige zusätzliche code mit dem neue Wert des Feldes. Ich will nur, um den code auszuführen, wenn die Taste gedrückt tatsächlich ändert sich der Wert der text box. Hier ist die Lösung, die ich kam mit.

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

Gibt es nur ein problem obwohl. onkeypress ausgelöst wird, bevor Sie das Feld ist-Wert aktualisiert wird, wenn also schnappe ich mir das Wert, ich bin immer der Vorherige Wert. Ich würde keyup verwenden ausschließlich, wenn ich wusste, dass ein Weg, um zu testen, ob die Taste verändert sich der Wert oder nicht, aber einige Zeichen (z.B. die Pfeiltasten) haben keine Auswirkung auf das Feld Wert.

Irgendwelche Ideen?

InformationsquelleAutor spudly | 2010-01-19

3

Den Weg ich tun, dies ist einfach mit einer variable entlang der Linien von prevValue. Am Ende des Schlüssels drücken Sie Funktion, speichern Sie den Wert in die variable, und nur führen Sie die Funktion wieder, wenn der Wert nicht gleich, dass der Vorherige Wert.

InformationsquelleAutor Nate B
4

dies ist einfach, benutzen Sie einfach onkeyup statt onkeypress

Sie sollten erwägen Sie eine Erklärung, warum onkeyup arbeiten würde, statt onkeypress.

InformationsquelleAutor john
1

haben andere bedingt:
```
if(e.keyCode > 31  && e.keyCode < 127) {
    value = this.value + e;
}
```
Diese fangen würde low-level ascii-symbol eingegeben, indem die Tastatur außerhalb des speziellen char-Auswahl.

EDIT: (32 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);        
  }        
}
```
Hähä, das war das, was ich Sinn 🙂 Sorry für die Unklarheiten. Ich hätte mehr spezifisch, dass die bedingte Bedarf geschachtelt werden.
Tatsächlich, ich erkannte, dass dies nicht funktioniert, weil die Schlüssel-codes müssen nicht unbedingt übereinstimmen mit den ascii-codes. Siehe developer.mozilla.org/en/DOM/Event/UIEvent/KeyEvent
Eh, es funktioniert immer noch, Sie müssen nur passen die zahlen. Lassen Sie mich versuchen, eine Bearbeitung des bedingten.
- _ | diese Zeichen sind false positives

InformationsquelleAutor Joel Etherton
1

Hier ist meine Letzte Lösung, die verwendet eine prevValue Variablen, aber nicht verunreinigen, den globalen namespace ("Fenster") oder die dom-element-Eigenschaften.
```
(function() {
  var input = document.getElementById('input_box'),
      prevValue;

  input.onkeyup = function(e) {
    if ( this.value != prevValue ) {
      prevValue = this.value;
      //execute some more code here...
    }
  }
}());
```
Hinweis oben, dass die onkeyup Funktion dient als Verschluss um das prevValue variable. Dies verhindert, dass die namespace-Verschmutzung, damit ich nicht haben, erstellen Sie eine Globale variable oder das Anhängen einer Eigenschaft an das input-element selbst. Diese ist so elegant wie ich es bekommen kann. Ich tatsächlich schrieb mir in jQuery dachte aber, die Antwort sollte von selbst eine Reine JavaScript...

InformationsquelleAutor spudly

Es ist sozusagen ein hack, aber Sie können den vorherigen Wert in einer Eigenschaft der textbox ("expando-Attribute")

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

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

InformationsquelleAutor Philippe Leybaert

Könnten Sie speichern Sie den alten Wert und erkennen, ob es geändert:

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

InformationsquelleAutor gnarf

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.