輸入框事件監聽(一):keydown、keyup、input
阿新 • • 發佈:2019-01-06
當輸入框的值發生變化時,我們可以通過keydown、keyup、input、onchange、blur事件觀察到其值的變化,但它們的應用時機與應用場景存在顯著的差異。
1. 實時觀察
需要觀察到使用者每次鍵盤輸入的變化,必須要用keydown、keyup與input,onchange與blur無效。在這其中,keyup與input都能及時獲取到使用者輸入的全值,而keydown不會將當前的鍵值計入到輸入框的值中,示例如下:
// 假定頁面存在如下元素
// <input type="text" id="username">
// 註冊input事件
username.addEventListener("input" , function(event) {
result.push({
event : 'input',
value : this.value,
keyCode : event.keyCode
});
})
// 註冊keydown事件
username.addEventListener("keydown", function(event) {
result.push({
event : 'keydown',
value : this.value,
keyCode : event.keyCode
});
});
// 註冊keyup事件
username.addEventListener("keyup", function(event) {
result.push({
event : 'keyup',
value : this.value,
keyCode : event.keyCode
});
});
// 註冊change事件
username.addEventListener("change", function(event) {
result.push({
event : 'change',
value : this .value,
keyCode : event.keyCode
});
// 輸出結果
console.table(result);
});
// 註冊blur事件
username.addEventListener("blur", function(event) {
result.push({
event : 'blur',
value : this.value,
keyCode : event.keyCode
});
// 輸出結果
console.table(result);
})
聚焦到輸入框中,依次輸入“abc”,最後控制檯的輸出結果如下圖所示。
從圖中可以看出如下結論:
1. keydown事件發生時,輸入值並沒有發生變化,所以keydown可用於阻止某些輸入字元的顯示。
2. input事件發生時,無法獲取到keyCode值,並且緊隨在keydown事件之後。
3. keyup事件最後發生,一次鍵盤敲入事件徹底完成。
4. change事件只會發生在輸入完成後,也就是輸入框失去焦點之前。
2. 輸入完成後觀察
當用戶完成所有的輸入時,這時候必定會發生blur事件,只有這時才會觸發change,所以可用blur與change監聽使用者輸入是否完成,輸入框的驗證多半發生在此時。
3. 輸入事件流
輸入框發生的事件流程依次為focus、keydown、input、keyup、change與blur,見下圖所示。