如何在JavaScript中的按鍵事件上獲取文本框的值

Question

我正在做一個chrome擴展程序，在其中我想在聚焦的textarea中按Enter鍵時在文本中進行一些字符串替換。 這是代碼片段：

var elems = document.getElementById("ChatTabsPagelet").getElementsByTagName("textarea"),i;
matchClass = "uiTextareaAutogrow";

for (i in elems) {
    if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')> -1) {
    text = elems[i].value;          
            elems[i].onkeyup = function(evt) {
              if(evt.keyCode == 13){
               alert(elems[i].value);
              }
      };
   }
}

基本上，我正在使用uiTextareaAutogrow類查找所有文本區域，而我只想在這些文本區域中的任何一個按下Enter鍵時訪問它們的值。 但是，當我在網頁上嘗試擴展時，總是在警報框中未定義 。 我猜keyup事件被觸發了，但是它無法獲取特定textarea的句柄。 我要去哪里錯了？

注意：我很想只使用javascript（而不是jquery），因為我希望擴展名很輕。

Answer 1

以下示例可以解決問題！ （ 請參見此處的正常工作的JSFiddle ）。

您不應該將for..in用於類似數組的對象，因為不能保證順序。 同樣，在動態函數中引用元素的值時，也需要使用this.value 。

var elems = document.getElementsByTagName("textarea")
matchClass = "uiTextareaAutogrow";
for(var i = 0, n = elems.length; i < n; i++) { // <---- simple for loop
    if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')> -1) {
             elems[i].onkeyup = function(evt) {
                  if(evt.keyCode == 13){
                      alert(this.value);
                   }
            }  
    }
}