在jQuery中,常用的鍵盤事件有3種:
一般情況先,jQuery都是使用這3個事件來捕獲鍵盤事件的。對於這3個事件,有一定的先後順序:keydown→keypress→keyup。
在jQuery中,keypress事件是在鍵盤上的某個鍵被按下到松開“整個過程”中觸發的事件。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $(window).keypress(function (event) { document.write("你輸入的字符是:" + String.fromCharCode(event.which)); }); }) </script> </head> <body> </body> </html>
當我們點擊鍵盤的“a”鍵時,在浏覽器預覽效果如下:
分析:
這個例子使用了keypress事件來獲取用戶按下某個鍵的信息。其中event參數用於獲取事件的基本信息,初學者只需要了解即可,我們在jQuery進階會詳細介紹這個event事件對象。
event.which用於獲取按下了哪個鍵或按鈕,返回的是某個鍵的ASCII碼。String.fromCharCode()方法表示將ASCII碼轉換為字符。
keydown跟keypress非常相似,也是在鍵盤的按鍵被按下時觸發。但是這2個事件有一下2大區別:
說實話,keydown與keypress也沒多大區別。像上面keypress的例子,使用keydown同樣能夠實現。
在jQuery中,keyup事件是在鍵盤的某個鍵被按下之後松開的一瞬間觸發的事件。
keyup在實際開發也常常用到,比如在用戶注冊登錄中,判斷密碼強度、判斷兩次輸入密碼是否一致等地方就用到keyup事件。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("#txt").keyup(function () { var str = $(this).val().toString(); $("#num").text(str.length); }) }) </script> </head> <body> <input id="txt" type="text"/> <div>字符串長度為:<span id="num">0</span></div> </body> </html>
在浏覽器預覽效果如下:
分析:
這裡實現了用戶輸入字符串的同時,jQuery會自動計算字符串的長度。原理是這樣的:在輸入字符串的時候我們需要點擊鍵盤按鈕,每輸入一個字符之後都會觸發keyup事件,因此我們可以使用keyup事件來統計。有人就問了,假如我想要像淘寶表單那樣判斷用戶密碼的強度或者限制用戶密碼的長度,該怎麼做呢?這就需要大家把正則表達式教程學完了再來談論哈,實現原理跟這個例子差不多。
鍵盤事件在前端開發中也是很常見的,不過都是用於一些高級場合,例如表單操作、HTML5 canvas游戲開發等。在游戲開發中,有時候我們需要使用鍵盤來控制人物的行走,這就用到了鍵盤事件。有機會的話,helicopter再給大家分享一下關於HTML5 canvas游戲開發的東西。
總結1、jQuery鍵盤事件只有3個:
2、三個事件的執行順序如下:keydown → keypress → keyup;
3、如果想要在jQuery中使用組合鍵,可以分別利用event事件對象中的event.ctrlKey、event.shiftKey、event.altKey判斷是否按下了Ctrl鍵、Shift鍵或Alt鍵。對於event事件對象,我們將在jQuery進階教程詳細給大家講解。不過現在大家可以自行度娘一下。