10

我有一个表单字段，我需要能够检测字段何时更改并使用该字段的新值执行一些额外的代码。如果按下的键实际上改变了文本框的值，我只想执行代码。这是我想出的解决方案。

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，但是某些字符（如箭头键）对字段的值没有影响。

有任何想法吗？

4

6 回答 6

4

这很简单，只需使用 onkeyup 而不是 onkeypress

于 2013-03-03T23:38:03.500 回答
3

我这样做的方式只是使用沿线的变量prevValue。在按键功能结束时，将值存储在该变量中，如果该值不等于先前的值，则仅再次执行该函数。

于 2010-01-19T20:34:59.070 回答
1

还有一个条件：

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);        
  }        
}
于 2010-01-19T20:34:04.487 回答
1

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

于 2010-01-20T15:32:35.477 回答
0

这是一种 hack，但您可以将先前的值放在文本框的属性中（称为“扩展属性”）

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

function onkeyup(e) {
  if (this.value != this.oldvalue) {
    // do something
  }
}
于 2010-01-19T20:34:27.433 回答
0

您可以存储旧值并检测它是否已更改：

function keyUpHandle(e) {
  if (this.prevValue && this.prevValue != this.value) {
    // do something
  }
  this.prevValue = this.value;
}
于 2010-01-19T20:35:09.850 回答