首页 > Web开发 > 详细

JS获取键盘码并判断按键

时间:2018-05-12 15:56:59      阅读:202      评论:0      收藏:0      [点我收藏+]

本文涉及语法:

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>

技术分享图片

 

转自:https://blog.csdn.net/u012038147/article/details/78120922?locationNum=8&fps=1

JS获取键盘码并判断按键

原文:https://www.cnblogs.com/Whitehat/p/9028843.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!