Come posso controllare il nuovo valore di un campo di testo sulla pressione dei tasti?

Question

Ho un singolo campo modulo e ho bisogno di essere in grado di rilevare quando cambia campo e di eseguire del codice aggiuntivo utilizzando il nuovo valore del campo. Voglio solo per eseguire il codice se il tasto premuto in realtà cambia il valore della casella di testo. Ecco la soluzione mi è venuta.

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

C'è solo un problema, però. onkeypress viene generato prima il valore del campo viene aggiornato, in modo che quando prendo il valore, sto ricevendo il valore precedente. Vorrei utilizzare keyup esclusivamente se conoscevo un modo per verificare se la chiave è cambiato il valore o no, ma alcuni caratteri (come i tasti freccia) non hanno alcun effetto sul valore del campo.

Tutte le idee?

Answer 1

Il mio modo di fare questo è semplicemente con una variabile lungo le linee di prevValue. Al termine della funzione tasto, memorizzare il valore di tale variabile, ed eseguire solo la funzione di nuovo se il valore non uguale a quella precedente valore.

Answer 2

questo è facile, basta usare onkeyup invece di onkeypress

Answer 3

avere un altro condizionale:

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

Questo sarebbe prendere qualsiasi simbolo ascii basso livello è entrato dalla tastiera al di fuori del campo di carattere speciale.

EDIT: (32 è lo spazio)

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

Ecco la mia soluzione finale, che utilizza una variabile prevValue ma non inquina lo spazio dei nomi globale (finestra) o le proprietà del elemento DOM.

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

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

Avviso sopra che la funzione onKeyUp funge da chiusura intorno alla variabile prevValue. Questo impedisce l'inquinamento dello spazio dei nomi in modo da non dover creare una variabile globale o allegare un alloggio ai elemento di input stessa. Questo è elegante come posso farlo. Io in realtà il mio scritto in jQuery ma pensato che la risposta stessa deve essere puro JavaScript ...

Answer 5

E 'una specie di hack, ma si può mettere il valore precedente in una proprietà di casella di testo (chiamato "attributi expando")

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

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

Answer 6

È possibile memorizzare il vecchio valore e rilevare se è cambiato:

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