輸入框監聽鍵盤事件

2021-10-04 01:56:35 字數 1471 閱讀 8033

鍵盤按鍵的主要事件有focus,keydown、keypress、keyup、input、onchange、blur

keydown:當使用者按下鍵盤上的任意鍵(除了prtsc)時觸發,如果按住不放的話,會重複觸發此事件;

keypress:當使用者按下鍵盤上的字元鍵(字母、數字、符號、回車空格)時觸發,如果是組合鍵的話(shift+1)觸發一次,如果按住不放的話,會重複觸發此事件;

keyup:當使用者釋放鍵盤上的字元鍵時觸發,如果按住不放的話不會觸發,放一次觸發一次。

focus:當輸入框獲取焦點時觸發

input:

blur:當輸入框失去焦點時觸發

change: 當輸入框失去焦點且輸入框內值改變時觸發。沒有進行輸入不會觸發change,輸入又刪除(和輸入前一樣)也不會觸發change

有點抽象,可以寫js**來觀察一下這些事件的觸發順序,舉個栗子

1.當我在輸入框按下a鍵並鬆開,然後滑鼠挪到輸入框外面使輸入框失去焦點,輸出順序是這樣的,

2.此時,我再選中輸入框,按下backspace並鬆開,觸發的事件是:

會發現keypress事件沒有了,這是因為backspace不屬於字元鍵,所以keypress鍵不會觸發。

3.現在我在輸入框輸入a,然後再按一次backspace,並使輸入框失去焦點

4.現在我在輸入框裡輸入!,並使輸入框失去焦點,會觸發的事件有

根據以上栗子,可以得到輸入框事件流為:

對於keycode的獲取情況是這樣的:

1.輸入框輸入1,然後輸入框失去焦點

可以看到在focus、input、change、blur事件的時候,是無法獲取到鍵盤的keycode的

2.在中文輸入法下輸入1a!

不會觸發keypress事件,且字元鍵的keycode都是229,非字元鍵的keycode值不變

迴圈監聽輸入框回車事件

1.第一種簡單寫法 function getkey function getkey2 function getkey3 function getkey4 使用者名稱 input type text name username id username onkeypress getkey input b...

input輸入框新增鍵盤事件

1 普通input輸入框新增鍵盤事件,keyup keydown,假設打算按enter鍵。搜尋 type text keyup.enter search 除了那幾個特殊鍵,其餘按鍵的呼叫可以將enter換成對應鍵盤碼即可。2 element ui中input輸入框新增鍵盤事件。搜尋 keyup.en...

輸入框和鍵盤

關於時間的知識 1.nsdata 時間間隔 2.nstimeinterval 時間間隔 時間戳 基本單位秒可以通過它得到我們想要的時間日期格式如下 y 年 m 年中的月份 d 當天是今年的第多少天 d 月份中的天數 f 月份中的週數 e 星期幾 a am pm h 一天中的小時數 0 23 k 一天...