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

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，因此，当我抓住该值时，我会得到上一个值。如果我知道一种测试键是否更改值的方法，我将专门使用键盘，但是某些字符（例如箭头键）对字段的值没有影响。

有任何想法吗？

Answer 1

我这样做的方式仅仅是沿着的变量 prevValue. 。在键按函数的末尾，将值存储在该变量中，并且仅在值不等于该上一个值的情况下再次执行函数。

Answer 2

这很容易，只需使用onkeyup而不是onkeypress

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

Answer 4

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

Answer 5

这是一种黑客，但是您可以将上一个值放入文本框的属性中（称为“ Expando属性”）

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

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

Answer 6

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

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