¿Cómo puedo comprobar el nuevo valor de un campo de texto al pulsar las teclas?

Question

Tengo un solo campo de formulario y tengo que ser capaz de detectar cuando el campo cambia y ejecutar algún código adicional utilizando el nueva valor del campo. Sólo quiero ejecutar el código si la tecla pulsada en realidad cambia el valor del cuadro de texto. Aquí está la solución que se me ocurrió.

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

No es sólo un problema sin embargo. onkeypress se dispara antes de que se actualiza el valor del campo, por lo que cuando me agarra el valor, yo estoy poniendo el valor anterior. Me gustaría utilizar keyup exclusivamente si conocía una forma de probar si la tecla cambia el valor o no, pero algunos caracteres (como las teclas de flecha) no tienen ningún efecto sobre el valor del campo.

¿Alguna idea?

Answer 1

A mi modo de hacer esto es simplemente con una variable a lo largo de las líneas de prevValue. Al final de la función de pulsación de tecla, almacenar el valor de esa variable, y sólo ejecutar la función de nuevo si el valor no es igual que el valor anterior.

Answer 2

esto es fácil, sólo tiene que utilizar en lugar de onkeyup onkeypress

Answer 3

tiene otra condicional:

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

Esta sería la captura de cualquier símbolo ASCII bajo nivel introducido por el teclado fuera del rango de carbón especial.

EDIT: (32 es el espacio)

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

Aquí está mi solución final, que utiliza una variable prevValue pero no contamina el espacio de nombres global (ventana) o las propiedades 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...
    }
  }
}());

Aviso anteriormente que la función onkeyup sirve como un cierre alrededor de la variable prevValue. Esto evita que la contaminación del espacio de nombres, así que no tienen que crear una variable global o adjuntar una propiedad para el elemento de entrada en sí. Esto es tan elegante como lo puedo conseguir. En realidad escribí mina en jQuery, pero pensamos que la respuesta en sí debe ser puro JavaScript ...

Answer 5

Es una especie de un corte, pero se puede poner el valor anterior de una propiedad de la caja de texto (llamados "atributos expando")

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

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

Answer 6

Se puede almacenar el valor antiguo y detectar si ha cambiado:

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