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

