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

需求：

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

2.在输入框输入内容时，键盘跟着变化

具体实现代码如下：

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 += "

";

} else if (keyArray[i].key_val == '9') {

template += "

";

} else if (keyArray[i].key_val == '220') {

template += "

";

} else if (keyArray[i].key_val == '20') {

template += "

";

} else if (keyArray[i].key_val == '13') {

template += "

";

} else if (keyArray[i].key_val == '16') {

template += "

";

} else if (keyArray[i].key_val == '16') {

template += "

";

} else if (keyArray[i].key_val == '17') {

template += "

";

} else if (keyArray[i].key_val == '36') {

template += "

";

}

else if (keyArray[i].key_val == '32') {

template += "

";

}

else {

template += "

";

}

}

// 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'

});

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