如何在按键时检查文本字段的新值？

Question

我有一个表单字段，我需要能够检测到字段何时发生更改，并使用新的字段值执行一些附加代码。我只想在按键实际更改文本框的值时才执行代码。以下是我提出的解决方案。

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

然而，有一个问题。onkeypress在字段的值被更新之前就会触发，所以当我获取这个值时，我得到的是先前的值。如果我知道一种方法来测试按键是否更改了值，我将仅使用keyup，但某些字符（如箭头键）对字段的值没有影响。

有任何想法吗？

- Stephen Sorensen

Answer 1

这很简单，只需使用onkeyup替代onkeypress即可。

- john

---

请考虑加入说明，解释为什么应该使用 onkeyup 而不是 onkeypress。 - adamdunson

Answer 2

我做这个的方式很简单，只需要使用一个类似于“prevValue”的变量。在按键函数结束时，将该值存储在该变量中，并仅当该值不等于先前的值时再次执行该函数。

- Nate B

Answer 3

再加一个条件语句：

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

这将捕获键盘输入的任何低级ASCII符号，超出特殊字符范围。

编辑：（32是空格）

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

- Joel Etherton

---

是的，那就是我想表达的 :) 对于我的含糊不清，我感到抱歉。我应该更明确地说明条件需要嵌套。 - Joel Etherton

其实，我刚意识到这个方法行不通，因为键码并不一定匹配ASCII码。请参考https://developer.mozilla.org/en/DOM/Event/UIEvent/KeyEvent。 - Stephen Sorensen

嗯，它仍然可以工作，你只需要调整数字。让我尝试一下条件语句的编辑。 - Joel Etherton

这些字符 - _ | 是误判。 - Diego Juliao

Answer 4

这是我的最终解决方案，它使用prevValue变量，但不会污染全局命名空间(window)或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...
    }
  }
}());

注意上面的onkeyup函数作为prevValue变量的闭包。这可以防止命名空间污染，因此我不必创建全局变量或将属性附加到输入元素本身。这是我能做到的最优雅的方式。实际上，我用jQuery编写了我的代码，但认为答案本身应该是纯JavaScript...

- Stephen Sorensen

Answer 5

这有点像是一个hack，但你可以将前一个值放在文本框的属性中（称为“扩展属性”）

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

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

- Philippe Leybaert

Answer 6

你可以存储旧值并检测它是否发生了变化：

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

- gnarf