當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

java弹出虚拟键盘_JS实现电脑虚拟键盘的操作

發(fā)布時(shí)間：2023/12/1 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 java弹出虚拟键盘_JS实现电脑虚拟键盘的操作小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

本文實(shí)例為大家分享了JS實(shí)現(xiàn)電腦虛擬鍵盤的具體代碼，供大家參考，具體內(nèi)容如下

需求：

1.當(dāng)輸入框光標(biāo)聚焦時(shí)，電腦虛擬鍵盤彈出

2.在輸入框輸入內(nèi)容時(shí)，鍵盤跟著變化

具體實(shí)現(xiàn)代碼如下：

Html部分：

電腦鍵盤的實(shí)現(xiàn)

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