獲得鍵盤中每個按鍵的keyCode值

獲得鍵盤中每個按鍵的keyCode值,每按下一個按鍵,頁面中table就增加一行,分別顯示按下的鍵和該鍵代表的keyCode值。代碼保存爲html文件,瀏覽器中打開即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body id="body">
<script>

    function CreateTable(){

    }
    //創建一個表格,設置表格的樣式等
    CreateTable.prototype.create=function(){
        var table=document.createElement('table');
        table.setAttribute('border','1');
        table.setAttribute('cellspacing','0');
        table.setAttribute('cellpadding','0');
        table.setAttribute('align','center');
        var thr=document.createElement("tr");
        var th=document.createElement("th");
        th.innerHTML='鍵盤按鍵';
        var th2=document.createElement("th");
        th2.innerHTML='鍵盤按鍵代表的keycode';
        thr.appendChild(th);
        thr.appendChild(th2);
        table.appendChild(thr);
        return table;
    };
    //未表格中添加數據
    CreateTable.prototype.createTd=function(table,trData){
            var tr=document.createElement("tr");
            var td=document.createElement("td");
            td.innerHTML=trData.key;
            var td2=document.createElement('td');
            td2.innerHTML=trData.keyCode;
            tr.appendChild(td);
            tr.appendChild(td2);
            table.appendChild(tr);
    }

    var t=new CreateTable();
    var table=t.create();
    document.getElementById('body').appendChild(table);

    document.οnkeydοwn=function(e){
        var a=[{key:'2',keyCode:'2'}];
        var o={
            key: e.key,
            keyCode: e.keyCode
        };
        t.createTd(table,o);

    }
</script>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章