模拟键盘

路人葵

于 2019-05-27 21:55:04 发布

阅读量159

点赞数

分类专栏：前端代码 javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_41218855/article/details/90612838

版权

前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

代码

16 篇文章 0 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟键盘</title>
    <style>
        * {
            margin: 1px;
            padding: 0;
        }
        #input {
            margin-bottom: 10px;
            height: 100px;
            border: 1px solid #ccc;
        }
        .key {
            float: left;
            width: 40px;
            margin-right: 10px;
            line-height: 40px;
            background-color: yellow;
            text-align: center;
        }
        .checked {
            color: #fff;
            background-color: red;
        }
    </style>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        function hasClass(obj, sClass) {
            var aClassName = obj.className.split(' ');
            for(var i = 0;i<aClassName.length;i++){
                if(aClassName[i] === sClass){
                    return true;
                }
            }
            return false;
        }
        function addClass(obj,sClass){
            if(!hasClass(obj,sClass)){
                obj.className += ' '+sClass;
            }
        }
        function removeclass(obj,sClass){
            var sClassName = obj.className,
                aClassName = sClassName.split(' '),
                aRemain = [];
            for(var i = 0;i<aClassName.length;i++){
                if(aClassName[i]!== sClass){
                    aRemain.push(aClassName[i]);
                }
            }
            obj.className = aRemain.join(' ');
        }
        window.onload = function () {
            var
                oInput = $('input');
                aKey = document.getElementsByClassName('key');
            document.onkeydown = function (ev) {
                var
                    ev = ev || window.event,
                    iKeyCode = ev.keyCode;
                //循环遍历比对
                for (var i = 0; i < aKey.length; i++) {
                    if (aKey[i].getAttribute('keycode') == iKeyCode) {
                        addClass(aKey[i], 'checked');
                        //添加内容
                        if(iKeyCode === 8){
                            oInput.innerHTML = oInput.innerHTML.slice(0,-1);
                        }else {
                            oInput.innerHTML += String.fromCharCode(iKeyCode);
                        }
                        break;
                    }
                }
            }
            document.onkeyup = function () {
                for (var i = 0; i < aKey.length; i++) {
                    removeclass(aKey[i],'checked')
                }
            }
        }
    </script>
</head>
<body>
    <div id="input"></div>
    <div class="key" keycode="48">0</div>
    <div class="key" keycode="49">1</div>
    <div class="key" keycode="50">2</div>
    <div class="key" keycode="51">3</div>
    <div class="key" keycode="52">4</div>
    <div class="key" keycode="53">5</div>
    <div class="key" keycode="54">6</div>
    <div class="key" keycode="55">7</div>
    <div class="key" keycode="56">8</div>
    <div class="key" keycode="57">9</div>
    <div class="key" keycode="8">del</div>
    <div class="key" keycode="81">Q</div>
    <div class="key" keycode="87">W</div>
    <div class="key" keycode="69">E</div>
    <div class="key" keycode="32">space</div>
</body>
</html>