DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 14.4 JavaScript鍵盤事件
14.4 JavaScript鍵盤事件
編輯:JavaScript基礎知識     

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

  • (1)onkeypress事件;
  • (2)onkeydown事件;
  • (3)onkeyup事件;

JavaScript事件通過以下3個事件來捕獲鍵盤事件:onkeydown、onkeypress與onkeyup。這三個事件的執行順序如下:onkeydown → onkeypress → onkeyup。

一、onkeypress事件

在JavaScript中,onkeypress事件是在鍵盤上的某個鍵被按下到松開整個過程中觸發的事件。

舉例1:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function refresh() {
            //判斷是否按下R鍵
            if (window.event.keyCode == 82) {
                location.reload();    //刷新頁面
            }
        }
        //調用函數
        document.onkeypress = refresh;
    </script>
</head>
<body>
    <div>歡迎來到 學習網!</div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

其中“window.event.keyCode == 82”表示判斷是否按R鍵(大寫R)刷新頁面。當我們按下R鍵,會發現頁面被刷新了。關於event對象的用法,我們在JavaScript進階教程再詳細給大家講解。

二、onkeydown事件

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

(1)onkeypress事件只在按下鍵盤的任一“字符鍵”(如A~Z、數字鍵)時觸發,單獨按下“功能鍵”(如F1~F12、Ctrl鍵、Shift鍵、Alt鍵等)不會觸發;而onkeydown無論是按下“字符鍵”還是“功能鍵”都會觸發;

(2)按下“字符鍵”會同時觸發onkeydown和onkeypress這2個事件,但是這2個事件有一定順序:onkeydown>onkeypress;

說實話,onkeydown與onkeypress也沒多大區別。像上面舉例1,使用onkeydown同樣能夠實現。

三、onkeyup事件

在JavaScript中,onkeyup事件是在鍵盤的某個鍵被按下之後松開的一瞬間觸發的事件。

onkeyup事件在實際開發也常用到,比如在登錄注冊時,很多文本框都是在用戶輸入的同時判斷是否符合要求。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input id="txt" type="text"/>
    <div>字符串長度為:<span id="num">0</span></div>
    <script type="text/javascript">
        //獲取DOM元素節點
        var e = document.getElementById("txt");
        var n = document.getElementById("num");
        //定義文本框的onkeyup事件
        e.onkeyup = function () {
            var str = e.value.toString();
            n.innerHTML = str.length;
        }
    </script>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡實現了用戶輸入字符串的同時,JavaScript會自動計算字符串的長度。原理是這樣:在輸入字符串的時候我們需要點擊鍵盤按鈕,每輸入一個字符我們都會觸發onkeyup事件,因此我們可以使用onkeyup事件來統計。有人就問了,假如我想要像淘寶表單那樣判斷用戶密碼的強度或者限制用戶密碼的長度,該怎麼做呢?這就需要大家把正則表達式教程學完了再來談論哈。

總結

1、JavaScript鍵盤事件只有3個:

JavaScript鍵盤事件 事件 說明 onkeydown 按下鍵事件(包括數字鍵、功能鍵) onkeypress 按下鍵事件(只包含數字鍵) onkeyup 放開鍵事件(包括數字鍵、功能鍵)

2、三個事件的執行順序如下:onkeydown → onkeypress → onkeyup

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

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