實時監聽input輸入內容的N種方法
阿新 • • 發佈:2019-01-03
現在有一個需求,需要我們實時監聽input輸入框中的內容,從而帶來更好的使用者體驗,而不是等我們全部輸入完畢才告訴我們格式不對
首先我們建立一個input輸入框
<form name='loginForm'>
<input type='text' name='user'/>
</form>
接著獲取這個文字框
var loginForm=document.forms['loginForm'],
user=loginForm.elements['user'];
//無需設定input的id屬性,只設置name即可
方法一
change事件
user.onchange=function(){
consolo.log(user.value);
}
沒錯,這個方法的確可以幫助我們解決監聽input輸入內容的需求,不過這個方法有一個致命的缺點,他不是實時監聽,只有input失去焦點且文字框內容發生改變才會觸發。
方法二
keydown事件
keypress事件
keyup事件
這是三個鍵盤事件,不過這三個事件還是有一些不同
1.當按一下任意鍵,會觸發onkeydown事件,如果不鬆開,將一直觸發。
2.當按一下字元鍵(比如abcd1234這些)會觸發onkeypress事件,如果不鬆開,將一直觸發這個事件。
3.當釋放鍵盤上的鍵,才觸發onkeyup事件。
4.按下一個鍵盤上的字元鍵,三種事件的觸發順序keydown -> keypress -> keyup
5.按下esc鍵,在firefox瀏覽器以及ie瀏覽器會觸發keypress事件,在chrome瀏覽器和Opera瀏覽器不會觸發keypress(js高階程式設計第三版P379頁的說法並不精確)
user.onkeypress=function(){
console.log(user.value);
};
user.onkeydown=function (){
console.log(user.value);
};
user.onkeyup=function(){
console.log(user.value);
}
實際檢測時會發現,keydown事件以及keypress事件會存在延遲,每次獲取的輸入值,都是之前的,總是慢半拍,原因是keydown與keypress總是在新值發生改變之前觸發。
最後發現只有keyup符合要求,不過keyup也不是完美的,缺點就是當你複製貼上值進去的時候,或者瀏覽器自動記住的值輸入進去的時候,keyup事件不會觸發
方法三
input事件
user.oninput=function(){
console.log(user.value);
}