2011-05-29 112 views
20

有沒有辦法實現文本更改事件來檢測html輸入文本字段上的文本更改?
使用按鍵事件(按下按鍵等)可以模擬這種情況,但它確實沒有性能和困難,有沒有更好的方法?html文本輸入onchange事件

+4

請給出更多細節。你需要做什麼 - 沒有想到如何去做。例如,如果該字段接收到來自條形碼掃描器的輸入,則我將監視該字段而不是使用鍵盤按鍵或onchange – mplungjan 2011-05-29 17:54:45

+1

@ mplugjan:用戶鍵入到文本框中以搜索查詢,並且輸出區域不斷更新 – user775187 2011-05-30 06:06:21

回答

24

當我做這樣的事情時,我使用onKeyUp事件。

<script type="text/javascript"> 
function bar() { 
     //do stuff 
} 
<input type="text" name="foo" onKeyUp="return bar()" /> 

,但如果你不想使用HTML事件,你可以嘗試使用jQuerys .change()方法

$('.target').change(function() { 
    //do stuff 
}); 

在這個例子中,輸入必須有一個類「目標「

如果你將擁有你想擁有做同樣的事情時,他們的文本更改多個文本框,你需要他們的數據,那麼你可以這樣做:

$('.target').change(function(event) { 
    //do stuff with the "event" object as the object that called the method 
)}; 

這樣你可以使用相同的代碼,使用相同的類的多個文本框,而不必重寫任何代碼。

+0

使用keyup事件實現的jQuery的變化事件? – user775187 2011-05-30 06:05:22

+0

@ user775187不,我認爲它是它實現的onChange事件,因爲您也可以使用更改事件來處理單選按鈕,選擇列表,選擇框等等。 – CaffeinatedCM 2011-05-30 18:13:45

+0

-1:「但是如果你不想使用html事件,你可以嘗試使用jQuerys .change()方法。」在使用html中的event屬性和使用jQuery之間有很多選項。沒有的建議相當具有誤導性。最重要的是,從你的回答中也可以看出,這兩件事實際上與完全不同的事件有關。 – Jasper 2017-10-14 19:47:11

5

好吧,除非我誤解你可以只使用onChange屬性:

<input type="text" onChange="return bar()"> 

注:通過單擊走在FF 3(至少)這不叫,直到一些格蘭用戶已經證實了他們的改變形成元素,點擊輸入或其他。

28

onChange在您稍後失去焦點之前不會觸發。如果您想對各種瞬時變化非常嚴格,請使用:

<input 
    type  = "text" 
    onchange = "myHandler();" 
    onkeypress = "this.onchange();" 
    onpaste = "this.onchange();" 
    oninput = "this.onchange();" 
/>