JS获取键盘码并判断按键

最新推荐文章于 2022-10-25 08:40:19 发布

weixin_30615767

最新推荐文章于 2022-10-25 08:40:19 发布

阅读量602

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Whitehat/p/9028843.html

版权

本文涉及语法：

onkeydown //当键盘按下
onkeyup //当键盘被松开
onkeypress //按键被按下并释放一个键时
even.keyCode //获取键盘码
String.fromCharCode() //可接受一个可指定的unicode值，返回一个字符串

代码如下：

<!doctype html>
<html lang="zh-en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>原生JavaScript键盘事件</title>
    <link rel="icon" href="http://tools.renpengpeng.com/favicon.ico" />
    <style>
    *{
        padding:0;
        padding-top:10px;
        margin:0;
        text-align:center;
    }
    #jp,#jptxt {
        margin-top:30px;
        width:500px;
        heihgt:300px;
        margin:0 auto;
    }
    </style>
</head>
<body>
<div id="jp">请按下键盘</div>
<div id="jptxt"></div>
<script>
//获取键盘按下并激活函数
document.onkeydown = function(even){
    //获取键盘码
    var jpCode = even.keyCode;
    //获取键盘上的字母键盘的字母
    var keychar=String.fromCharCode(jpCode);
    alert(keychar);
    //把页面上的id声明到变量中
    var jpCodeTxt = document.getElementById('jptxt')
    //打印键盘码到页面上
    document.getElementById('jp').innerHTML = jpCode;
    //开始switch循环 **  用于中文提示
    switch(jpCode){
        case 8:
        jpCodeTxt.innerHTML = "你按了删除键（Backspace）";
        break;
        case 13:
        jpCodeTxt.innerHTML = "你按了确定键（Enter）";
        break;
        case 18:
        jpCodeTxt.innerHTML = "你按了ALT";
        break;
        default:
        jpCodeTxt.innerHTML = "鬼知道你按了什么";
        break;
    }
}   

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