Como posso verificar o novo valor de um campo de texto no KeyPress?

Question

Eu tenho um único campo de formulário e preciso detectar quando o campo muda e executar algum código adicional usando o novo valor do campo. Eu só quero executar o código se a tecla pressionada realmente alterar o valor da caixa de texto. Aqui está a solução que eu criei.

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

Há apenas um problema. OnKeyPress é disparado antes que o valor do campo seja atualizado; portanto, quando eu pego o valor, estou obtendo o valor anterior. Eu usaria o KeyUp exclusivamente se soubesse uma maneira de testar se a chave mudou o valor ou não, mas alguns caracteres (como as teclas de seta) não têm efeito no valor do campo.

Alguma ideia?

Answer 1

A maneira como faço isso é simplesmente com uma variável ao longo das linhas de prevValue. No final da função Pression Press, armazene o valor nessa variável e execute apenas a função novamente se o valor não for igual a esse valor anterior.

Answer 2

Isso é fácil, basta usar onkeyup em vez de onkeypress

Answer 3

tem outro condicional:

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

Isso pegaria qualquer símbolo ASCII de baixo nível inserido pelo teclado fora da linha de char especial.

Editar: (32 é espaço)

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

Aqui está minha solução final, que usa uma variável PrevValue, mas não poluia o espaço de nome global (janela) ou as propriedades do 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...
    }
  }
}());

Observe acima que a função onkeyup serve como um fechamento em torno da variável PrevValue. Isso impede a poluição do espaço para nome, para que eu não precise criar uma variável global ou anexar uma propriedade ao próprio elemento de entrada. Isso é o mais elegante possível. Na verdade, escrevi o meu em jQuery, mas pensei que a resposta em si deveria ser pura JavaScript ...

Answer 5

É uma espécie de hack, mas você pode colocar o valor anterior em uma propriedade da caixa de texto (chamada "Expando Atributos")

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

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

Answer 6

Você pode armazenar o valor antigo e detectar se isso mudou:

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