深入理解DOM事件類型系列第二篇——鍵盤事件 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　鼠標和鍵盤是電腦端主要的輸入設備，上篇介紹了鼠標事件，本文將詳細介紹鍵盤事件

類型

　　鍵盤事件用來描述鍵盤行為，主要有keydown、keypress、keyup三個事件

keydown

　　當用戶按下鍵盤上的任意鍵時觸發，如果按住不放的話，會重復觸發該事件

<div id="test" style="height: 30px;width: 200px;background-color: pink;">請按下鍵盤上的任意鍵</div>
<button id="reset">還原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeydown = function(e){
    if(!test.mark){
        test.innerHTML ='';
    }
    test.mark = 1;
    e = e || event;
    test.innerHTML += e.type;
}
</script>

keypress

　　當用戶按下鍵盤上的字符鍵時觸發，按下功能鍵時不觸發。如果按住不放的話，會重復觸發該事件

　　[注意]關于esc鍵，各瀏覽器處理不一致。IE瀏覽器和firefox瀏覽器按下esc鍵時，會觸發keypress事件；而chrome/safari/opera這三個webkit內核的瀏覽器則不會觸發

　　鍵盤事件必須綁定在可以獲得焦點的元素上。而頁面剛加載完成時，焦點處于document元素

　　[注意]IE瀏覽器不完全支持綁定在document元素上的keypress事件，只有IE9+瀏覽器在使用DOM2級事件處理程序時才支持

　　所以，以下代碼中，只有焦點處于id為'test'的元素上，才會發生keypress事件

<button id="test" style="height: 30px;width: 200px;background-color: pink;">請按下鍵盤上的任意鍵</button><br>
<button id="reset">還原</button>
<script>
reset.onclick = function(){history.go();}
test.focus();
test.onkeypress = function(e){
    if(!test.mark){
        test.innerHTML ='';
    }
    test.mark = 1;
    e = e || event;
    test.innerHTML += e.type;
}
</script>

keyup

　　當用戶釋放鍵盤上的鍵時觸發

<div id="test" style="height: 30px;width: 200px;background-color: pink;">請按下鍵盤上的任意鍵</div>
<button id="reset">還原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
    if(!test.mark){
        test.innerHTML ='';
    }
    test.mark = 1;
    e = e || event;
    test.innerHTML += e.type;
}
</script>

時間間隔

　　系統為了防止按鍵誤被連續按下，所以在第一次觸發keydown事件后，有500ms的延遲，才會觸發第二次keydown事件

　　[注意]類似的，keypress事件也存在500ms的時間間隔

<button id="btn">獲取間隔時間</button>
<span>說明：按鈕獲取焦點后，使用空格鍵按下一段時間，松開后可獲取keydown事件的時間間隔</span>
<div id="result"></div>
<script>
var time = [];
var last=0;
btn.onkeydown = function(e){
    e = e || event;
    time.push(e.timeStamp-last);
    last = e.timeStamp;
}
btn.onclick = function(){
    time.shift();
    result.innerHTML = time.join();
}
</script>

順序

　　如果用戶一直按鍵不松開，就會連續觸發鍵盤事件，觸發的順序如下

1、keydown
2、keypress
3、keydown
4、keypress
5、（重復以上過程）
6、keyup

<button id="test" style="height: 30px;width: 200px;background-color: pink;">請按下鍵盤上的任意鍵</button><br>
<button id="reset">還原</button>
<script>
reset.onclick = function(){history.go();}
test.focus();
test.onkeypress =test.onkeydown =test.onkeyup = function(e){
    if(!test.mark){
        test.innerHTML ='';
    }
    test.mark = 1;
    e = e || event;
    test.innerHTML += e.type + ';';
}
</script>

按鍵信息

　　鍵盤事件包括keyCode、key、char、keyIdentifier和修改鍵共5個按鍵信息

鍵碼keyCode

　　在發生鍵盤事件時，event事件對象的鍵碼keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符鍵，keyCode屬性的值與ASCII碼中對應大寫字母或數字的編碼相同

　　[注意]firfox瀏覽器不支持keypress事件中的keyCode屬性

　　而我們在做游戲時，常用的四個方向按鍵，左上右下(順時針)的鍵碼分別是37、38、39、40

<div id="test" style="height: 30px;width: 200px;background-color: pink;"></div>
<button id="reset">還原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
    e = e || event;
    test.innerHTML += e.keyCode + ';';
}
</script>

key

　　key屬性是為了取代keyCode而新增的，它的值是一個字符串。在按下某個字符鍵時，key的值就是相應的文本字符；在按下非字符鍵時，key的值是相應鍵的名，默認為空字符串

　　[注意]IE8-瀏覽器不支持，而safari瀏覽器不支持keypress事件中的key屬性

<div id="test" style="height: 30px;width: 200px;background-color: pink;"></div>
<button id="reset">還原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
    e = e || event;
    test.innerHTML = e.key;
}
</script>

char

　　char屬性在按下字符鍵時的行為與key相同，但在按下非字符鍵時值為null

　　[注意]該屬性只有IE9+瀏覽器支持

keyIdentifier

　　keyIdentifier屬性在按下非字符鍵的情況下與key的值相同。對于字符鍵，keyIdentifier返回一個格式類似“U+0000”的字符串，表示Unicode值

　　[注意]該屬性只有chrome/safari/opera瀏覽器支持

<div id="test" style="height: 30px;width: 200px;background-color: pink;"></div>
<button id="reset">還原</button>
<script>
reset.onclick = function(){history.go();}
document.onkeyup = function(e){
    e = e || event;
    test.innerHTML = e.keyIdentifier;
}
</script>

兼容

　　一般地，使用key屬性和keyCode屬性來實現兼容處理。key屬性IE8-瀏覽器不支持，而keyCode屬性無法區分大小寫字母

var handler = function(e){
    var CompatibleKey;
    e = e || event;
    //支持key屬性
    if(e.key != undefined){
        CompatibleKey = e.key;
    }else{
        //當按鍵是數字或大寫字母時
        if(e.keyCode>47 && e.keyCode<58 || e.keyCode>64 && e.keyCode<91){
            CompatibleKey =String.fromCharCode(e.keyCode);
        }else{
            //當案按鍵是方向按鍵時
            switch(e.keyCode){
                case 37:
                    CompatibleKey = 'ArrowLeft';
                    break;
                case 38:
                    CompatibleKey = 'ArrowUp';
                    break;
                case 39:
                    CompatibleKey = 'ArrowRight';
                    break;
                case 40:
                    CompatibleKey = 'ArrowDown';
                    break;
            }
        }    
    }
}

修改鍵

　　修改鍵在鼠標事件中介紹過，在鍵盤事件中也存在修改鍵

　　修改鍵就是Shift、Ctrl、Alt和Meta(在Windows鍵盤中是Windows鍵，在蘋果機中是Cmd鍵)。DOM為此規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey和metaKey。這些屬性中包含的都是布爾值，如果相應的鍵被按下了，則值為true；否則值為false

<div id="box" style="height:30px;width:300px;background:pink;"></div>
<script>
document.onkeyup=function(e){
    e = e || event;
       if(e.shiftKey){box.innerHTML = 'shiftKey;'}
       if(e.ctrlKey){box.innerHTML = 'ctrlKey;'}
       if(e.altKey){box.innerHTML = 'altKey;'}
       if(e.metaKey){box.innerHTML = 'metaKey;'}
}
document.onkeydown = function(){
    return false;
}
</script>

應用

【1】提示大寫

　　在輸入框中輸入字符時，如果大寫模式開啟，提示此時為大寫模式。提示大寫并不是說當前輸出的是大寫字母，而是說當前caps lock大寫按鍵被按下

　　[注意]大寫有兩種實現方式：一種是在capslock開啟的情況下，另一種是輸入字符時，同時按下shift鍵

<input id="test">
<span id="tips"></span>
<script>
test.onkeydown = function(e){
    e = e || event;
    //兼容IE8-瀏覽器，因為IE8-瀏覽器不支持在定時器中傳遞事件對象e
    var shiftKey = e.shiftKey;
    var keyCode = e.keyCode;
    //通過定時器延遲來獲取當前輸入字符值
    setTimeout(function(){
        var value = test.value.slice(-1);
        //如果沒有按下shift鍵，并且當前為大寫字母，或者按下shift鍵，且當前為小寫字母
        if(!shiftKey && /[A-Z]/.test(value) || shiftKey && /[a-z]/.test(value)){
            tips.innerHTML = '當前為大寫模式';
            setTimeout(function(){
                tips.innerHTML = '';
            },400)
        }                
    })
}
</script>

【2】過濾輸入

　　只能輸入數字，輸入其他字符沒有效果

<input id="test">
<span id="tips">只能輸入數字</span>
<script>
test.onkeydown = function(e){
    e = e || event;
    //利用定時器，獲取實時輸入值
    setTimeout(function(){
        //當輸入值中包含非數字時
        if(/[^0-9]/.test(test.value)){
            //只輸出數字值
            test.value = String(/\d*/.exec(test.value));
        }
    })
}
</script>