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

我有一個單一的表單字段，我需要能夠檢測到該字段的更改時間，並使用該字段的值執行一些其他代碼。我只想執行代碼，如果推送的鍵實際上改變了文本框的值。這是我提出的解決方案。如何檢查按鍵上的文本字段的新值？

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在該字段的值更新之前被觸發，因此當我獲取該值時，我將獲得以前的值。如果我知道一種方法來測試鍵是否更改了值，我將僅使用鍵控，但某些字符（如箭頭鍵）對字段值沒有影響。

任何想法？

來源

2010-01-19 spudly

我這樣做的方式是簡單地沿着prevValue的變量。在按鍵功能結束時，將該值存儲在該變量中，並且只在該值不等於先前的值時再次執行該功能。

來源

2010-01-19 20:34:59

有另一個條件：

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-19 20:34:04

耶的onkeyup，這就是我的意思:)很抱歉的模糊性。我應該更具體地說，條件需要嵌套。 – 2010-01-19 20:44:23

其實，我只是意識到這是行不通的，因爲關鍵代碼不一定與ascii代碼相匹配。見https://developer.mozilla.org/en/DOM/Event/UIEvent/KeyEvent – spudly 2010-01-19 20:49:07

呃，它仍然有效，你只需要調整數字。讓我嘗試編輯條件。 – 2010-01-19 20:51:59

這是一種黑客攻擊的，但你可以把以前的值在文本框中的屬性（稱爲「的expando屬性」）

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

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

來源

2010-01-19 20:34:27

你可以存儲舊值，並檢測它是否改變了：

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

來源

2010-01-19 20:35:09 gnarf

這是我的最終解決方案，它採用了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-20 15:32:35 spudly

這很容易，只要用它代替onkeypress事件

來源

2013-03-03 23:38:03 john

您應該考慮添加解釋，爲什麼'onkeyup'可以工作而不是'onkeypress'。 – adamdunson 2013-03-03 23:55:37

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

回答

相關問題