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

来源：互联网发布：sat 知乎编辑：程序博客网时间：2024/05/19 06:48

今天给大家带来原生JavaScript获取键盘码并判断按键，这句话好像有点毛病，但是又不知道该怎么说，就这样啦，正文开始
原文链接：http://renpengpeng.com/690.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>

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

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

html文件下载地址：原生JavaScript获取键盘码并判断按键.html

阅读全文

0 0