如何檢查按鍵上文本字段的新值？

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

這很簡單，只需使用onkeyup而不是onkeypress

Answer 2

我這樣做的方法只是使用prevValue的變量。 在按鍵功能結束時，將值存儲在該變量中，如果該值不等於該值，則僅再次執行該功能。

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變量的閉包。 這可以防止命名空間污染，因此我不必創建全局變量或將屬性附加到input元素本身。 這是我能得到的優雅。 我實際上是用jQuery編寫的，但認為答案本身應該是純JavaScript ...

Answer 5

這是一種黑客行為，但您可以將之前的值放在文本框的屬性中（稱為“expando attributes”）

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