一个编写测试键盘的javascript程序和测试键盘的程序

代码很简单，直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Keyboard input</title>
    </head>
    <body>
        <canvas id='canvas' width='700' height='700'></canvas>
        <script src='https://code.jquery.com/jquery-3.6.1.js'></script>

        <script>
            $('body').keydown(function(event){
                //under linde code get the key value
                console.log(event.keyCode);

                //under line code get key name accroding the key value
                //console.log(keyNames[event.keyCode]);
            });

            var keyNames = {
                32: 'space',
                37: 'left',
                39: 'right',
                38: 'up',
                40: 'down',
                13: 'return',
                
                65: 'a',
                66: 'b',
                67: 'c',
                68: 'd',
                69: 'e',
                70: 'f',
                71: 'g',

                72: 'h',
                73: 'i',
                74: 'j',
                75: 'k',
                76: 'l',
                77: 'm',
                78: 'n',

                79: 'o',
                80: 'p',
                81: 'q',
                82: 'r',
                83: 's',
                84: 't',

                85: 'u',
                86: 'v',
                87: 'w',
                88: 'x',
                89: 'y',
                90: 'z',

                220: '~',
                27: 'esc',
                9: 'tab',
                16: 'shift',
                17: 'Ctrl',
                18: 'Alt',
                91: 'Win',

                48: '0',
                49: '1',
                50: '2',
                51: '3',
                52: '4',
                53: '5',
                54: '6',
                55: '7',
                56: '8',
                57: '9',

                8: 'Backpsace',
                219: '[',
                221: ']',
                186: ';',
                222: ",",
                187: '-',
                189: '=',
                188: ',',
                190: '.',
                191: '/',
                120: 'ins',
                115: 'Home',
                114: 'End',
            };

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

效果：

下面是键盘测试测试程序：

<!DOCTYPE html>
<html>
    <head>
        <title>Keyboard input</title>
    </head>
    <body>
        <canvas id='canvas' width='700' height='700'></canvas>
        <script src='https://code.jquery.com/jquery-3.6.1.js'></script>

        <script>
            $('body').keydown(function(event){
                //under linde code get the key value
                //console.log(event.keyCode);

                //under line code get key name accroding the key value
                console.log(keyNames[event.keyCode]);
            });

            var keyNames = {
                32: 'space',
                37: 'left',
                39: 'right',
                38: 'up',
                40: 'down',
                13: 'return',
                
                65: 'a',
                66: 'b',
                67: 'c',
                68: 'd',
                69: 'e',
                70: 'f',
                71: 'g',

                72: 'h',
                73: 'i',
                74: 'j',
                75: 'k',
                76: 'l',
                77: 'm',
                78: 'n',

                79: 'o',
                80: 'p',
                81: 'q',
                82: 'r',
                83: 's',
                84: 't',

                85: 'u',
                86: 'v',
                87: 'w',
                88: 'x',
                89: 'y',
                90: 'z',

                220: '~',
                27: 'esc',
                9: 'tab',
                16: 'shift',
                17: 'Ctrl',
                18: 'Alt',
                91: 'Win',

                48: '0',
                49: '1',
                50: '2',
                51: '3',
                52: '4',
                53: '5',
                54: '6',
                55: '7',
                56: '8',
                57: '9',

                8: 'Backpsace',
                219: '[',
                221: ']',
                186: ';',
                222: ",",
                187: '-',
                189: '=',
                188: ',',
                190: '.',
                191: '/',
                120: 'ins',
                115: 'Home',
                114: 'End',
            };

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

结果：

你学废了吗

相关阅读:
pycharm激活（JetBrains IDEA 系列产品通用xx方法（license server））
纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
字符串替换
jquery 倒计时效果
js 数字前自动补零
css 常用的绝对定位元素水平垂直居中的方法
webapp中绝对定位/固定定位与虚拟键盘冲突的问题
css 兼容各种iPhone
使用 position:sticky 实现粘性布局
jquery判断点击鼠标左、中、右键事件

原文地址：https://www.cnblogs.com/guochaoxxl/p/16750067.html