input實時監聽value change

看風景就發表於2016-11-18

要即時的監聽輸入框(input,textarea)內容的變化,有一下幾種方法

keydown,keypress,keyup事件   這些事件監聽不了右鍵的複製,剪下和貼上這些操作,在某些版本的瀏覽器中也會失效

change事件           1. 當物件屬性改變,並且是鍵盤或者滑鼠激發的,指令碼觸發無效
                2. 當物件失去焦點(onblur)觸發,且內容必須發生改變,若先改變再還原,則失焦時不觸發

input和propertychange事件    input是HTML5標準事件,在輸入框的內容變化後立即觸發,oninput能相容到IE9.
               propertychange是IE專屬的事件,物件屬性發生改變時觸發

               oninput限制:  1. js改變value時,不觸發
                        2. select選取值,不觸發
               onpropertychange限制: input為disable=true時,不觸發

Bug
oninput和onpropertychange這兩個事件在IE9中有個Bug,就是通過右鍵選單的
剪下和刪除命令刪除內容時候不會觸發,其他IE版本正常,目前無更好的方案。

onpropertychange在IE中,若用domObj.className="xx"來修改輸入框的樣式,
會導致IE下會有輸入第一個字元的時候onpropertychange不觸發的bug,因此要用
domObj.style.color="xx"來設定。

相關文章