鍵盤事件與鼠標(biāo)事件類似，同樣常出現(xiàn)在JavaScript開發(fā)過程中。鍵盤事件的觸發(fā)過程具體是這樣的: 在用戶按下鍵盤上的一個(gè)字符鍵時(shí)， 首先會(huì)觸發(fā)keydown事件，然后是keypress事件，最后是keyup事件。其中，keydown和keypress事件是在文本框發(fā)生變化之前 被觸發(fā)；而keyup在文本框發(fā)生變化之后被觸發(fā)。如果用戶按下一個(gè)鍵不放，就會(huì)重復(fù)觸發(fā)keydown和keypress事件。在用戶按下一個(gè)非字符鍵時(shí)，首先觸發(fā)keydown事件，然后就是keyup事件。如果用戶按下一個(gè)鍵不放，就會(huì)重復(fù)觸發(fā)keydown。

一、鍵盤事件屬性

鍵盤定義了很多屬性，如下表所示。利用這些屬性可以精確控制鍵盤操作。鍵盤事件屬性一般只在鍵盤相關(guān)事件發(fā)生時(shí)才會(huì)存在于事件對(duì)象中，但是 ctrlKey 和 shiftKey 屬性除外，因?yàn)樗鼈兛梢栽谒Ｊ录写嬖?。例如，?dāng)按下 Ctrl 或Shift 鍵時(shí)單擊鼠標(biāo)操作。
鍵盤事件定義的屬性

示例1

ctrlKey 和 shiftKey 屬性可存在于鍵盤和鼠標(biāo)事件中，表示鍵盤上的 Ctrl 和 Shift 鍵是否被按住。下面示例能夠監(jiān)測 Ctrl 和 Shift 鍵是否被同時(shí)按下。如果同時(shí)按下，且鼠標(biāo)單擊某個(gè)頁面元素，則會(huì)把該元素從頁面中刪除。

    document.onclick = function (e) {
        var e = e || window.event;  //標(biāo)準(zhǔn)化事件對(duì)象
        var t = e.target || e.srcElement;  //獲取發(fā)生事件的元素，兼容IE和DOM
        if (e.ctrlKey && e.shiftKey) {  //如果同時(shí)按下Ctrl和Shift鍵
            t.parentNode.removeChild(t);  //移出當(dāng)前元素
        }
    }

 keyCode 和 charCode 屬性使用比較復(fù)雜，但是它們?cè)趯?shí)際開發(fā)中又比較常用，故比較這兩個(gè)屬性在不同事件類型和不同瀏覽器中的表現(xiàn)時(shí)非常必要的，如下表所示。讀者可以根據(jù)需要有針對(duì)性的選用事件響應(yīng)類型和引用屬性值。

keyCode 和 charCode 屬性值

某些鍵的可用性不是很正確，如 PageUp 和 Home 鍵等。不過常用功能鍵和字符鍵都是比較穩(wěn)定的。

示例2

下面示例演示了如何使用方向鍵控制頁面元素的移動(dòng)效果。

<div id="box"></div>
<script>
    var box = document.getElementById("box");  // 獲取頁面元素的引用指針
    box.style.position = "absolute";  // 色塊絕對(duì)定位
    box.style.width = "20px";  // 色塊寬度
    box.style.height = "20px";  // 色塊高度
    box.style.backgroundColor = "red";  // 色塊背景
    document.onkeydown = keyDown;
    //在Document對(duì)象中注冊(cè)keyDown事件處理函數(shù)
    function keyDown(event){  // 方向鍵控制元素移動(dòng)函數(shù)
        var event = event || window.event;  // 標(biāo)準(zhǔn)化事件對(duì)象
        switch(event.keyCode){  // 獲取當(dāng)前按下鍵盤鍵的編碼
            case 37 :  // 按下左箭頭鍵，向左移動(dòng)5個(gè)像素
                box.style.left = box.offsetLeft - 5  + "px";
                break;
            case 39 :  // 按下右箭頭鍵，向右移動(dòng)5個(gè)像素
                box.style.left = box.offsetLeft + 5 + "px";
                break;
            case 38 :  // 按下上箭頭鍵，向上移動(dòng)5個(gè)像素
                box.style.top = box.offsetTop  - 5 + "px";
                break;
            case 40 :  // 按下下箭頭鍵，向下移動(dòng)5個(gè)像素
                box.style.top = box.offsetTop  + 5 + "px";
                break;
        }
        return false
    }
</script>

 在上面示例中，首先獲取頁面元素，通過 CSS 腳本控制元素絕對(duì)定位、大小和背景色。然后在 document 對(duì)象上注冊(cè)鼠標(biāo)按下事件類型處理函數(shù)，在事件回調(diào)函數(shù) keyDown() 中偵測當(dāng)前按下的方向鍵，并決定定位元素在窗口中的位置。其中元素的 offsetLeft 和 offsetTop 屬性可以存取它在頁面中的位置。

鍵盤響應(yīng)順序

鍵盤事件主要包括下面 3 種類型：

• keydown：在鍵盤上按下某個(gè)鍵時(shí)觸發(fā)。如果按住某個(gè)鍵，會(huì)不斷觸發(fā)該事件，但是 Opera 瀏覽器不支持這種連續(xù)操作。該事件處理函數(shù)返回 false 時(shí)，會(huì)取消默認(rèn)的動(dòng)作（如輸入的鍵盤字符，在 IE 和 Safari 瀏覽器下還會(huì)禁止keypress 事件響應(yīng)）。
• keypress：按下某個(gè)鍵盤鍵并釋放時(shí)觸發(fā)。如果按住某個(gè)鍵，會(huì)不斷觸發(fā)該事件。該事件處理函數(shù)返回 false 時(shí)，會(huì)取消默認(rèn)的動(dòng)作（如輸入的鍵盤字符）。
• keyup：釋放某個(gè)鍵盤鍵時(shí)觸發(fā)。該事件僅在松開鍵盤時(shí)觸發(fā)一次，不是一個(gè)持續(xù)的響應(yīng)狀態(tài)。

當(dāng)獲取用戶正按下鍵碼時(shí)，可以使用 keydown、keypress 和 keyup 事件獲取這些信息。其中 keydown 和 keypress 事件基本上是同義事件，它們的表現(xiàn)也完全一致，不過一些瀏覽器不允許使用 keypress 事件獲取按鍵信息。所有元素都支持鍵盤事件，但鍵盤事件多被應(yīng)用在表單輸入中。

當(dāng)按下鍵盤時(shí)，會(huì)連續(xù)觸發(fā)多個(gè)事件，它們將按如下順序發(fā)生。

對(duì)于字符鍵來說，鍵盤事件的響應(yīng)順序：keydown → keypress → keyup。對(duì)于非字符鍵（如功能鍵或特殊鍵）來說，鍵盤事件的相應(yīng)順序：keydown → keyup。

如果按下字符鍵不放，則 keydown 和 keypress 事件將逐個(gè)持續(xù)發(fā)生，直至松開按鍵。如果按下非字符鍵不放，則只有 keydown 事件持續(xù)發(fā)生，直至松開按鍵。

示例

下面設(shè)計(jì)一個(gè)簡單示例，以獲取鍵盤事件相應(yīng)順序。

<textarea id="text" cols="26" rows="16"></textarea>
<script>
    var n = 1;  // 定義編號(hào)變量
    var text = document.getElementById("text");  // 獲取文本區(qū)域的引用指針
    text.onkeydown = f;  // 注冊(cè)keydown事件處理函數(shù)
    text.onkeyup = f;  // 注冊(cè)keyup事件處理函數(shù)
    text.onkeypress = f;  // 注冊(cè)keypress事件處理函數(shù)
    function f(e){  // 事件調(diào)用函數(shù)
        var e = e || window.event;  // 標(biāo)準(zhǔn)化事件對(duì)象
        text.value += (n++) + "=" + e.type +"  (keyCode=" + e.keyCode + ")\n";
        //捕獲事件響應(yīng)信息
    }
</script>

鍵盤鍵碼keyCode對(duì)照表

到此這篇關(guān)于js常用的鍵盤事件有哪些_用法示例_鍵碼keyCode對(duì)照表的文章就介紹到這了,更多相關(guān)js鍵盤事件keyCode內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論