2012-08-11 59 views
0

我正在嘗試使它成爲所以我沒有爲每個輸入字段都寫一個函數,我想使用它。而是將元素ID發送給函數,並且只有一個函數可以回收。Javascript-將函數變量的元素id分配給事件監聽器

工作原理是這樣

<input name="field" id="field" type="text" onKeyPress="onlyNum()" /> 

    <script type="text/javascript"> 
     function onlyNum() { 
      var name = $("#field"); 
      name.keypress(function (e) { 
       if (e.which > 0 && // check that key code exists 
        e.which != 8 && // allow backspace 
        !(e.which >= 48 && e.which <= 57) // allow 0-9 
        ) { 
        e.preventDefault(); 
       } 
      }); 
     } 
    </script> 

但它不喜歡這個工作,但是這就是我要爲:

<input name="field" id="field" type="text" onKeyPress="onlyNum('field')" /> 

    <script type="text/javascript"> 
     function onlyNum(theInput) { 
      var name = document.getElementById(theInput); 
      name.keypress(function (e) { 
       if (e.which > 0 && // check that key code exists 
        e.which != 8 && // allow backspace 
        !(e.which >= 48 && e.which <= 57) // allow 0-9 
        ) { 
        e.preventDefault(); 
       } 
      }); 
     } 
    </script> 

因此,沒有人知道什麼是錯的第二個例子?我怎樣才能讓它工作。謝謝

+0

嘗試更改爲'onKeyPress =「onlyNum(this)」'然後'this.keypress(function(e){...})'。你在使用jQuery嗎? – 2012-08-11 09:07:10

+0

如果您使用的是jQuery,那麼上面的代碼非常低效且不必要。 – 2012-08-11 09:08:54

回答

2

第二個示例的問題在於,您試圖在DOM元素上調用.keypress.keypress雖然是一個jQuery對象的方法。

整個方法雖然很奇怪。你想要做的是在每次按鍵時將一個新的事件處理程序綁定到該元素。也就是說,在三個鍵被按下之後,你已經爲同一個元素分配了三個事件處理程序,這些處理程序都是一樣的。

你應該做的是爲每個要綁定事件處理程序的元素分配一個類,使用jQuery選擇它們並綁定處理程序一次

例如:

<input name="field" id="field" type="text" class="someClass"/> 

綁定的處理程序:

// will bind the event handler to each 'input' field with class 'someClass' 
$('input.someClass').keypress(function (e) { 
    if (e.which > 0 && // check that key code exists 
     e.which != 8 && // allow backspace 
     !(e.which >= 48 && e.which <= 57) // allow 0-9 
    ) { 
     e.preventDefault(); 
    } 
}); 

如果您不能修改HTML,然後利用multiple selector和列表中的ID:

// adds the event handler to the elements with the IDs 'field', 'someID' and 
// 'someOtherID' 
$('#field, #someID, #someOtherID').keypress(function() { 
    //... 
}); 

這就是jQuery的工作原理。您可能想閱讀some of the tutorials以更好地瞭解它。


這裏是修復你的代碼推薦方式:

我已經說過,你要綁定一個處理器到keypress事件處理程序,這是沒有意義的內部keypress事件。您已通過onkeypress HTML屬性分配了事件處理程序。你不需要元素的ID。你所要做的就是將event對象傳遞給你的函數。

實施例:

<input name="field" id="field" type="text" onKeyPress="onlyNum(event)" /> 

JavaScript的:

function onlyNum(e) { 
    if (e.which > 0 && // check that key code exists 
     e.which != 8 && // allow backspace 
     !(e.which >= 48 && e.which <= 57) // allow 0-9 
    ) { 
     e.preventDefault(); 
    } 
} 

這種方法的最大的不同在於event是一個本地事件對象,而不是一個jQuery事件對象。這也意味着在IE8及以下版本中調用e.preventDefault()將失敗,因爲此方法不存在。此外,您可能必須使用e.keyCode而不是e.which。jQuery負責所有這些差異。

+0

對不起,我正在弄清楚這一點。看起來乾乾淨淨,但我不需要爲每個輸入寫一個新的處理程序? – 2012-08-11 09:22:53

+0

編號'$('input.someClass')'應該選擇你想綁定處理程序的每個*元素。 jQuery負責將您傳遞給'.keypress'的函數綁定到每個選定的元素。這就是它的工作原理,這就是它使用起來很舒服的原因。 – 2012-08-11 09:24:18

+0

我加了這個只是爲了給出一個完整的圖片。如果您使用jQuery,則應該使用它來綁定事件處理程序,不要將標記(HTML)與邏輯(事件處理)混合使用。 – 2012-08-11 09:25:22

相關問題