Comment puis-je vérifier la nouvelle valeur d'un champ de texte à chaque touche?

Question

J'ai un seul champ de formulaire et je dois être en mesure de détecter les changements de terrain et d'exécuter un code supplémentaire en utilisant le nouveau valeur du champ. Je veux seulement exécuter le code si la clé poussé réellement modifie la valeur de la zone de texte. Voici la solution que je suis venu avec.

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

Il y a juste un problème cependant. onkeypress est tiré avant que la valeur du champ est mis à jour, alors quand je prends la valeur, j'obtenir la valeur précédente. J'utiliser keyup exclusivement si je connaissais un moyen de tester si la clé a changé la valeur ou non, mais certains personnages (comme les touches fléchées) n'a pas d'effet sur la valeur du champ.

Toutes les idées?

Answer 1

La cette façon que je fais est tout simplement avec une variable le long des lignes de prevValue. A la fin de la fonction de touche, stocker la valeur dans cette variable, et seulement exécuter à nouveau la fonction si la valeur ne correspond pas à la valeur précédente.

Answer 2

est facile, il suffit d'utiliser onkeyup au lieu de onkeypress

Answer 3

une autre condition:

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

attraperait un symbole ascii bas niveau entré par le clavier hors de la plage de caractère spécial.

EDIT: (32 est l'espace)

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

Voici ma solution finale, qui utilise une variable prevValue mais ne pollue pas l'espace de noms global (fenêtre) ou les propriétés de l'élément 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...
    }
  }
}());

Indication ci-dessus que la fonction onkeyup sert de fermeture autour de la variable prevValue. Cela empêche la pollution de l'espace de noms, donc je n'ai pas de créer une variable globale ou d'attacher une propriété à l'élément d'entrée lui-même. Ceci est aussi élégant que je peux l'obtenir. Je le mien effectivement écrit dans jQuery, mais pense que la réponse elle-même devrait être JavaScript pur ...

Answer 5

Il est un peu un hack, mais vous pouvez mettre la valeur précédente dans une propriété de la zone de texte (appelé « attributs expando »)

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

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

Answer 6

Vous pouvez stocker l'ancienne valeur et détecter si elle a changé:

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