1. 程式人生 > >時時監聽input內容的改變

時時監聽input內容的改變

強人 tint doc 獲取 interval ons cti keypress span

心得:我們都知道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內容的改變