初識onkeydown及其相容性問題

風靈使發表於2018-05-16

在js中用：document.onkeydown來對使用者敲擊鍵盤事件進行監聽，在網上整理了點，現將資料集中於此。

概念onkeypress、onkeyup、onkeydown區別：

  • onkeypress 這個事件在使用者按下並放開任何字母數字鍵時發生。系統按鈕（例如，箭頭鍵和功能鍵）無法得到識別。
  • onkeyup 這個事件在使用者放開任何先前按下的鍵盤鍵時發生。
  • onkeydown 這個事件在使用者按下任何鍵盤鍵（包括系統按鈕，如箭頭鍵和功能鍵）時發生。

小demo：只在在輸入的時候可以用backspace，其他地方不可以用。

<script type = "text/javascript"> //處理鍵盤事件  
function doKey(e)
{
    var ev = e || window.event;
    //獲取event物件  
    var obj = ev.target || ev.srcElement;
    //獲取事件源  
    var t = obj.type || obj.getAttribute('type');
    //獲取事件源型別  
    if (ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") {
        return false;
    }
}
//禁止後退鍵 作用於Firefox、Opera  
document.onkeypress = doKey;
//禁止後退鍵  作用於IE、Chrome  
document.onkeydown = doKey;
 </script>

解決onkeydown在IE和FF中的相容問題 （這個我沒做過測試呢）
IE瀏覽器中：

var keycode = event.keyCode;

FireFox和Opera瀏覽器中：

var keycode = e.which;

總結簡便寫法如下：

var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode;//支援IE、FF

完整demo如下：

<button type = "button" onclick = "searchAuction();" id ="btn_selector">
<label> 精確篩選 </label>
</button>

<script type = "text/javascript" > 
function keydown(e) 
{
    var currKey = 0, e = e || event;
    currKey = e.keyCode || e.which || e.charCode;
    //支援IE、FF 
    if (currKey == 13) {
        document.getElementByIdx_x("btn_selector").click();
    }
}
document.onkeydown = keydown;//onkeydown事件呼叫方式 
</script>

寫法一、觸發submit事件，支援IE

<form onkeydown = "checkkey(event)" > //上一段中介紹的event所攜帶的值傳給了keys
function checkkey(keys) 
{
    //判斷一下是否同時按了CTRL鍵和ENTER鍵.
    if (keys.ctrlKey && keys.keyCode == 13) //如果判斷的結果確實是兩個鍵準確無誤的按下了，那麼就提交資料
    {
        this.document.form.submit();
    }
}

說明：event是將這次按鍵的值傳遞給函式作判斷用的。也就是說event裡面承載著我們這次按鍵的資料。

寫法二、觸發click事件,支援IE

<body  onkeydown="if (event.keyCode==13) {document.all.button2.click();}">

寫法三、按鍵翻頁效果，支援IE

<script type = "text/javascript"> 

var preview_page = "14671.html";
var next_page = "14675.html";
var index_page = "index.html";
var article_id = "305";
var chapter_id = "14674";
function jumpPage() 
{
    if (event.keyCode == 37) {
        location = preview_page;
    }
    if (event.keyCode == 39) {
        location = next_page;
    }
    if (event.keyCode == 13) {
        location = index_page;
    }
}
document.onkeydown = jumpPage;
</script>

應用的demo：

在test.jsp中引入test.js

document.okeydown = KeyLogin;

function KeyLogin(){

if(event.keyCode == 13){

LoginSystem();/////觸發此function

}

}

相關文章