grid布局+JS实现电脑虚拟键盘的操作

最新推荐文章于 2023-07-02 23:09:57 发布

UzumakiHan

最新推荐文章于 2023-07-02 23:09:57 发布

阅读量975

点赞数 1

分类专栏： html JavaScript css 文章标签： html5 jquery javascript

本文链接：https://blog.csdn.net/Hhjian524/article/details/106498038

版权

JavaScript 同时被 3 个专栏收录

93 篇文章 1 订阅

订阅专栏

html

45 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

需求：
1.当输入框光标聚焦时，电脑虚拟键盘弹出
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200602155533820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hoamlhbjUyNA==,size_16,color_FFFFFF,t_70
2.在输入框输入内容时，键盘跟着变化

具体实现代码如下：
Html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./index.css">
    <title>电脑键盘的实现</title>
</head>
<body>
	<div class="input_box">
		<input type="text" id="myinput" placeholder="点击输入框弹出键盘" value=""/>
	</div>
    <div class="keyBoard">
   
	</div>
	<script src="./jquery-1.11.0.min.js"></script>
	<script src="./index.js"></script>
	
	<script>
	


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

CSS部分：

body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
.keyBoard{
    max-width: 800px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(197, 197, 197);
    border-radius: 10px;
    display: none;
    grid-template-columns: repeat(30, 15px);
    grid-template-rows: repeat(5, 35px);
    grid-gap: 5px;

}
.key {
    background-color: rgb(243, 243, 243);
    border: 2px solid black;
    border-radius: 5px;
    grid-column: span 2;
    font-size: 12px;
    text-align: center;
    /* padding-top: 17px; */
    cursor: pointer;
    line-height: 35px;
    font-weight: 700;
}

.key:hover {
  border: 1px solid #eeeeee;
  
  
}

.backspace {
    grid-column: span 4;
}

.tab {
    grid-column: span 3;
}

.backslash {
    grid-column: span 3;
}

.capslock {
    grid-column: span 4;
}

.enter {
    grid-column: span 4;
}

.leftshift {
    grid-column: span 5;
}

.rightshift {
    grid-column: span 5;
}

.leftctrl {
    grid-column: span 3;
}

.microsoft {
    grid-column: span 3;
    font-size: 14px;
   
}

.space {
    grid-column: span 13;
}
.input_box{
    width: 400px;
    height: 60px;
    /* border: 1px solid black; */
    margin: auto;
    margin-top: 100px;
}
.input_box input{
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    font-size: 30px;
}

JS部分

var keyArray = [
    { 'key_name': '`', 'key_val': '192' },
    { 'key_name': '1', 'key_val': '49' },
    { 'key_name': '2', 'key_val': '50' },
    { 'key_name': '3', 'key_val': '51' },
    { 'key_name': '4', 'key_val': '52' },
    { 'key_name': '5', 'key_val': '53' },
    { 'key_name': '6', 'key_val': '54' },
    { 'key_name': '7', 'key_val': '55' },
    { 'key_name': '8', 'key_val': '56' },
    { 'key_name': '9', 'key_val': '57' },
    { 'key_name': '0', 'key_val': '48' },
    { 'key_name': '-', 'key_val': '189' },
    { 'key_name': '=', 'key_val': '187' },
    { 'key_name': 'Backspace', 'key_val': '8' },

    { 'key_name': 'Tab', 'key_val': '9' },
    { 'key_name': 'Q', 'key_val': '81' },
    { 'key_name': 'W', 'key_val': '87' },
    { 'key_name': 'E', 'key_val': '69' },
    { 'key_name': 'R', 'key_val': '82' },
    { 'key_name': 'T', 'key_val': '84' },
    { 'key_name': 'Y', 'key_val': '89' },
    { 'key_name': 'U', 'key_val': '85' },
    { 'key_name': 'I', 'key_val': '73' },
    { 'key_name': 'O', 'key_val': '79' },
    { 'key_name': 'P', 'key_val': '80' },
    { 'key_name': '[', 'key_val': '219' },
    { 'key_name': ']', 'key_val': '221' },
    { 'key_name': "\\ ", 'key_val': '220' },

    { 'key_name': 'CapsLock', 'key_val': '20' },
    { 'key_name': 'A', 'key_val': '65' },
    { 'key_name': 'S', 'key_val': '83' },
    { 'key_name': 'D', 'key_val': '68' },
    { 'key_name': 'F', 'key_val': '70' },
    { 'key_name': 'G', 'key_val': '71' },
    { 'key_name': 'H', 'key_val': '72' },
    { 'key_name': 'J', 'key_val': '74' },
    { 'key_name': 'K', 'key_val': '75' },
    { 'key_name': 'L', 'key_val': '76' },
    { 'key_name': ';', 'key_val': '186' },
    { 'key_name': "'", 'key_val': '222' },
    { 'key_name': 'Enter', 'key_val': '13' },

    { 'key_name': 'Shift', 'key_val': '16' },
    { 'key_name': 'Z', 'key_val': '90' },
    { 'key_name': 'X', 'key_val': '88' },
    { 'key_name': 'C', 'key_val': '67' },
    { 'key_name': 'V', 'key_val': '86' },
    { 'key_name': 'B', 'key_val': '66' },
    { 'key_name': 'N', 'key_val': '78' },
    { 'key_name': 'M', 'key_val': '77' },
    { 'key_name': ',', 'key_val': '188' },
    { 'key_name': '.', 'key_val': '190' },
    { 'key_name': '/', 'key_val': '191' },
    { 'key_name': 'Shift', 'key_val': '16' },

    { 'key_name': 'Ctrl', 'key_val': '17' },
    { 'key_name': 'Alt', 'key_val': '18' },
    { 'key_name': 'Home', 'key_val': '36 ' },
    { 'key_name': 'Space', 'key_val': '32' },
    { 'key_name': 'Home', 'key_val': '36' },
    { 'key_name': 'Alt', 'key_val': '18' },
    { 'key_name': 'Ctrl', 'key_val': '17' },
    { 'key_name': 'Fn', 'key_val': '00' },

]
var keyBoard = document.getElementsByClassName('keyBoard')[0]
function renderKeyBoard(keyArray) {
    var template = '';
    for (var i = 0; i < keyArray.length; i++) {
        if (keyArray[i].key_val == '8') {
            template += "<div class='key backspace' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '9') {
            template += "<div class='key tab' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '220') {
            template += "<div class='key backslash' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '20') {
            template += "<div class='key capslock' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '13') {
            template += "<div class='key enter' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '16') {
            template += "<div class='key leftshift' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '16') {
            template += "<div class='key rightshift' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '17') {
            template += "<div class='key leftctrl' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        } else if (keyArray[i].key_val == '36') {
            template += "<div class='key microsoft' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        }
        else if (keyArray[i].key_val == '32') {
            template += "<div class='key space' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        }
        else {
            template += "<div class='key' data-key='" + keyArray[i].key_val + "'>" + keyArray[i].key_name + "</div>";
        }


    }
    // console.log(template)
    keyBoard.innerHTML = template;
}
renderKeyBoard(keyArray)
var key_div = document.getElementsByClassName('key');
// console.log(key_div)
$("#myinput").on("focus", function (e) {
    // console.log(e.keyCode)
    keyBoard.style.display = 'grid'

});
$("#myinput").on("keydown", function (e) {
     console.log(e.target.value)
   if(e.target.value != ''){
    for (var i = 0; i < key_div.length; i++) {
        var key_val = Number(key_div[i].getAttribute('data-key'));
        if (key_val === e.keyCode) {
            key_div[i].style.color = '#fff';
            key_div[i].style.backgroundColor = '#9F79EE'
        } else {
            key_div[i].style.color = ''
            key_div[i].style.backgroundColor = ''
        }
    }
   }

});
$("#myinput").on("keyup", function (e) {
    for (var i = 0; i < key_div.length; i++) {
        key_div[i].style.color = ''
        key_div[i].style.backgroundColor = ''
    }

});
$("#myinput").on("blur", function (e) {
    // console.log(e.keyCode)
    keyBoard.style.display = 'none'

});