代码之家 › 专栏 › 技术社区 › Stephen Sorensen

如何在按键上检查文本字段的新值?

fromcharcode onkeyup onkeypress keycode javascript

Stephen Sorensen · 技术社区 · 15 年前

我只有一个表单字段,需要能够检测字段何时更改,并使用新的字段的值。我只想在按键实际更改文本框的值时执行代码。这是我提出的解决方案。

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,但是一些字符(如箭头键)对字段的值没有影响。

有什么想法吗?

6 回复 | 直到 12 年前

Nate B 15 年前

我这样做的方法就是简单地用一个变量沿着 prevValue . 在按键功能结束时,将值存储在该变量中,并且仅当值不等于前一个值时才再次执行该函数。

john 12 年前

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

Joel Etherton 15 年前

有另一个条件:

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

Stephen Sorensen 15 年前

这是我的最终解决方案,它使用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…

Philippe Leybaert 15 年前

这有点像黑客,但您可以将前一个值放在文本框的属性中(称为“expando attributes”)。

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

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

gnarf 15 年前

您可以存储旧值并检测其是否发生更改:

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