input value值的實時監聽
oninput,onpropertychange,onchange的用法
onchange觸發事件必須滿足兩個條件:
a)當前物件屬性改變,並且是由鍵盤或滑鼠事件激發的(指令碼觸發無效)
b)當前物件失去焦點(onblur);
onpropertychange的話,只要當前物件屬性發生改變,都會觸發事件,但是它是IE專屬的;
關於oninput事件
oninput 是 HTML5 的標準事件,對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過使用者介面發生的內容變化非常有用,在內容修改後立即被觸發,不像 onchange 事件需要失去焦點才觸發。 oninput 事件相容為ie9+, ie下可以onpropertychange事件,不是本節內容。
只要內容又發生變化都會觸發oninput事件,對於用鍵盤直接輸入的純字元時比較好用,但當輸入中文時,由於中文是由多個漢語拼音組成一個漢字,沒輸入一個漢語拼音都要觸發一次oninput,但你最終想要監聽的只有最後輸入的中文字。也就是說input事件無法區分鍵盤直接輸入和非直接(輸入法)輸入。對於非直接(輸入法)輸入,則需要用到下面兩個事件。
compositionstart和compositionend屬於複合事件,用來處理IME的輸入序列。
IME(input MEthod Editor,輸入法編輯器)可以讓使用者輸入物理鍵盤上找不到的字元,例如漢字“龍”。先簡單理解為對輸入法程式的監聽。
compositionstart
在IME的文字複合系統開啟時出發,例如使用中文輸入法輸入中文時, compositionstart事件會以同步模式觸發.
compositionend
在IME的文字複合系統關閉時觸發,表示返回正常鍵盤輸入狀態。
看了兩個事件就明白,開始中文輸入時會觸發compositionstart事件選詞結束後會觸發compositionend事件,忽略這兩個事件之間的input事件即可,為元素新增這個兩個事件,做一個開關,如下:
<input type="text" id="sample" />
var node = document.querySelector('#sample' );
var inputLock = false;
node.addEventListener('compositionstart', function(){
inputLock = true;
})
node.addEventListener('compositionend', function(){
inputLock = false;
})
node.addEventListener('input', function(){
if(!inputLock )
// do something for input limit
});
compositionstart 、compositionend和input三個事件的執行順序是compositionstart --> input (一次或多次) --> compositionend。
下面是一個對input的輸入進行監聽的一段例項程式碼,通過inputLock來過濾IME時的input事件。
function initNameInputEvent(){
var $name = $("#name");
var inputLock = false;
$name.bind('input propertychange',
function(e){
if(!inputLock)
onInputChange(e.target);
});
$name.bind('compositionstart',
function(){
console.log("start");
inputLock = true;
});
$name.bind('compositionend',
function(e){
inputLock = false;
onInputChange(e.target);
});
}