原生JavaScript获取键盘码并判断按键

作者: pengpeng 分类: 所有文章 发布时间: 2017-09-28 09:36

今天给大家带来原生JavaScript获取键盘码并判断按键,这句话好像有点毛病,但是又不知道该怎么说,就这样啦,正文开始

本文涉及语法:

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

代码如下:

<!doctype>
<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>

这个例子用了两种判断方式,一种是string.fromCharcode()另外一种是switch判断,string.fromCharcode()有一个缺点不可以显示空格回车等特殊按键。
给大家一个键盘码参考图:

在线预览(请电脑预览):点我预览

html文件下载地址:

  原生JavaScript获取键盘码并判断按键.html (1.4 KB, 23 次)

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注