時時監聽input內容的改變
心得:我們都知道inoput有一個change事件,但是是在input元素失去焦點的時候發生,不能時時的監聽input內容的改變。
剛開始的時候我是想用setInterval設置計時器的原理定時監聽input內容的改變,但是結果差強人意,效果一點也不好,有時候操做過快還會出現undefined的情況。
解決方法:通過閱讀資料了解到input有意的input事件在大多當今主流的瀏覽器都能實現對input輸入內容的時時監聽;
<input id="test"/>
$("#test").bind("input",function(){console.log("內容變化了");});
由於公司項目是兼容到IE10,還有火狐,谷歌瀏覽器,360是中國人可能用的比較多的瀏覽器,360瀏覽器在中文輸入的情況下,按住shift+字母然後回車的方法輸入大寫字母,用keyup,keydown,keypress事件都不能獲取當前變化的內容,而是之前的內容,input事件很好的解決了這一兼容性問題。
但是,以上代碼僅在除了ie的瀏覽器才work,那ie該怎麽處理呢? 在ie中有一個屬性叫做onpropertychange:
<input id="test" onpropertychange="alert(‘change‘);" type="text" />
經過調試後馬上就會發現,這個屬性是在元素的任何屬性變化時都會起作用,包括我們這裏所提到的value,但至少是起作用了,那接下來的任務就是篩選出property為value的變化。
document.getElementById(‘test‘).attachEvent(‘onpropertychange‘,function(e) { if(e.propertyName!=‘value‘) return; $(that).trigger(‘input‘); });
在上面代碼中的回調函數中會傳入一個參數,為該事件,該事件有很多屬性值,搜尋一下可以發現有一個我們很關心的,叫做propertyName,也就是當前發生變化的屬性名稱。然後就相當簡單了,只要在回調函數中判斷一下是否為我們所要的value,是的話就trigger一下‘input’事件。
然後,就可以在主流瀏覽器中統一用這樣的方式來監聽‘input’事件了。
$(‘#test‘).on(‘input‘,function(){ alert(‘input‘); })
完整帶代碼:
$(‘#test‘).on(‘input‘,function(){
alert(‘input‘);
})
//for ie
if(document.all){
$(‘input[type="text"]‘).each(function() {
var that=this;
if(this.attachEvent) {
this.attachEvent(‘onpropertychange‘,function(e) {
if(e.propertyName!=‘value‘) return;
$(that).trigger(‘input‘);
});
}
})
}
時時監聽input內容的改變