DIV CSS 佈局教程網

7.4 鍵盤事件
編輯:jQuery基礎知識     

在jQuery中,常用的鍵盤事件有3種:

  • (1)keypress事件;
  • (2)keydown事件;
  • (3)keyup事件;

一般情況先,jQuery都是使用這3個事件來捕獲鍵盤事件的。對於這3個事件,有一定的先後順序:keydown→keypress→keyup。

一、keypress事件

在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事件

keydown跟keypress非常相似,也是在鍵盤的按鍵被按下時觸發。但是這2個事件有一下2大區別:

  • (1)keypress事件只在按下鍵盤的任一“字符鍵”(如A~Z、數字鍵)時觸發,單獨按下“功能鍵”(如F1~F12、Ctrl鍵、Shift鍵、Alt鍵等)不會觸發;而keydown無論是按下“字符鍵”還是“功能鍵”都會觸發;
  • (2)按下“字符鍵”會同時觸發keydown和keypress這2個事件,但是這2個事件有一定順序:keydown>keypress;

說實話,keydown與keypress也沒多大區別。像上面keypress的例子,使用keydown同樣能夠實現。

三、keyup事件

在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個:

jQuery鍵盤事件 事件 說明 keydown 按下鍵事件(包括數字鍵、功能鍵) keypress 按下鍵事件(只包含數字鍵) keyup 放開鍵事件(包括數字鍵、功能鍵)

2、三個事件的執行順序如下:keydown → keypress → keyup;

3、如果想要在jQuery中使用組合鍵,可以分別利用event事件對象中的event.ctrlKey、event.shiftKey、event.altKey判斷是否按下了Ctrl鍵、Shift鍵或Alt鍵。對於event事件對象,我們將在jQuery進階教程詳細給大家講解。不過現在大家可以自行度娘一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved