jquery 鍵盤事件 keypress() keydown() keyup()用法總結(jié)
事件的定義
完整的 key press 過程分為兩個部分:1. 按鍵被按下;2. 按鍵被松開。
當按鈕被按下時,發(fā)生 keydown 事件。
keydown() 方法觸發(fā) keydown 事件,或規(guī)定當發(fā)生 keydown 事件時運行的函數(shù)。
當按鈕被松開時,發(fā)生 keyup 事件。它發(fā)生在當前獲得焦點的元素上。
keyup() 方法觸發(fā) keyup 事件,或規(guī)定當發(fā)生 keyup 事件時運行的函數(shù)。
keypress 事件與 keydown 事件類似。當按鈕被按下時,會發(fā)生該事件。它發(fā)生在當前獲得焦點的元素上。
不過,與 keydown 事件不同,每插入一個字符,就會發(fā)生 keypress 事件。
keypress() 方法觸發(fā) keypress 事件,或規(guī)定當發(fā)生 keypress 事件時運行的函數(shù)。
使用情況:
(which事件)
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
which 屬性指示按了哪個鍵或按鈕。(event.keyCode和event.charCode進行了標準化。)
1.理論上它可以綁定到任何元素,但keydown/keyup事件只是發(fā)送到具有焦點的元素上,不同的瀏覽器中,可獲得焦點的元素略有不同,但是表單元素總是能獲取焦點,所以對于此事件類型表單元素是最合適的
2.在input元素上綁定keydown事件時獲取的內(nèi)容都是之前輸入的,當前輸入的獲取不到
3.keydown()事件觸發(fā)在文字還沒有敲進文本框,這時如果在kevdown事件中輸入文本框中的文本,得到的是觸發(fā)鍵盤事件前的文本
4.keyup()事件觸發(fā)時整個鍵盤事件的操作已經(jīng)完成,獲得的是觸發(fā)鍵盤事件后的文本
5.keypress()捕獲瀏覽器鍵盤輸入的時候
6.keypress事件與keydown和keyup的主要區(qū)別(所以使用組合鍵時需要使用keydown事件兼容)
- 只能捕獲單個字符,不能捕獲組合鍵
- 無法響應(yīng)系統(tǒng)功能鍵(如delete,backspace)
- 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符
7.KeyPress主要用來接收字母、數(shù)字等ANSI字符
8.KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵,如:功能鍵(F1-F12)、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等
在使用鍵盤的時候通常會用到 Ctrl+shift+alt 類似的組合鍵功能,通過 keyup 事件能夠處理(說明一下這里不用keydown事件:因為在判定keydown 的時候,ctrl、shift、和Alt屬于一直按下狀態(tài)然后再加另外一個鍵是不能準確捕獲組合鍵,所以使用keydown 是不能準確判斷的,要通過keyup事件來判定)
以上就是本次介紹的關(guān)于jquery 鍵盤事件函數(shù)的全部知識點內(nèi)容,更多內(nèi)容可以到相關(guān)欄目查找。
相關(guān)文章
jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
這篇文章主要介紹了jQuery EasyUI datagrid實現(xiàn)本地分頁的方法,以實例形式較為詳細的分析了本地分頁的原理與相關(guān)的實現(xiàn)技巧,需要的朋友可以參考下2015-02-02
jQuery 循環(huán)遍歷改變a標簽的href(實例講解)
下面小編就為大家?guī)硪黄猨Query 循環(huán)遍歷改變a標簽的href(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
jQuery實現(xiàn)高亮顯示網(wǎng)頁關(guān)鍵詞的方法
這篇文章主要介紹了jQuery實現(xiàn)高亮顯示網(wǎng)頁關(guān)鍵詞的方法,涉及jquery針對頁面字符串的遍歷與正則替換的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
jQuery實現(xiàn)select模糊查詢(反射機制)
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)select帶模糊查詢的條件查詢,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01
jQuery plugin animsition使用小結(jié)
本文通過實例代碼給大家分享了jQuery plugin animsition用法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09
超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁面扁平化的普及,越來越多的網(wǎng)站都開始使用響應(yīng)式布局,作為一個優(yōu)秀的前端工作者,必須要精通的,這里給大家推薦一款響應(yīng)式布局的jQuery插件。2014-11-11

