zoukankan      html  css  js  c++  java
  • JS获取键盘码并判断按键

    本文涉及语法:

    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;
            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

  • 相关阅读:
    OCP-1Z0-053-V12.02-40题
    OCP-1Z0-053-V12.02-255题
    OCP-1Z0-053-V12.02-407题
    OCP-1Z0-053-V12.02-298题
    OCP-1Z0-053-V12.02-38题
    OCP-1Z0-053-V12.02-274题
    OCP-1Z0-053-V12.02-159题
    OCP-1Z0-053-V12.02-406题
    OCP-1Z0-053-V12.02-369题
    OCP-1Z0-053-V12.02-610题
  • 原文地址:https://www.cnblogs.com/Whitehat/p/9028843.html
Copyright © 2011-2022 走看看