JS实现电脑虚拟键盘的操作

时间：2021-05-26

本文实例为大家分享了JS实现电脑虚拟键盘的具体代码，供大家参考，具体内容如下

需求：

1.当输入框光标聚焦时，电脑虚拟键盘弹出

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" rel="external nofollow" > <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; 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; 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'});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章