JS實(shí)現(xiàn)電腦虛擬鍵盤的操作
更新時間：2020年06月24日 10:05:53 作者：Jeslie-He
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電腦虛擬鍵盤的操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)電腦虛擬鍵盤的具體代碼，供大家參考，具體內(nèi)容如下
需求：
1.當(dāng)輸入框光標(biāo)聚焦時，電腦虛擬鍵盤彈出
2.在輸入框輸入內(nèi)容時，鍵盤跟著變化
具體實(shí)現(xiàn)代碼如下：
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" rel="external nofollow" > <link rel="stylesheet" href="./index.css" > <title>電腦鍵盤的實(shí)現(xiàn)</title> </head> <body> <div class="input_box"> <input type="text" id="myinput" placeholder="點(diǎn)擊輸入框彈出鍵盤" 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'
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用offsetParent屬性在Dom層次中逐級向上回溯，將每個層次偏移量合計,需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)預(yù)覽圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制當(dāng)前網(wǎng)址
在大量的網(wǎng)站都有這樣的功能，當(dāng)點(diǎn)擊一個按鈕的時候可以復(fù)制當(dāng)前頁面的地址，以此可以方便網(wǎng)站用戶對鏈接的存儲，同時也便于網(wǎng)站的推廣，下面給大家分享具體實(shí)現(xiàn)代碼，對js實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制的相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
今天在瀏覽網(wǎng)頁時無意中發(fā)現(xiàn)了這段JS劫持搜索引擎代碼。劫持搜索引擎正常搜索過來的流量，這是黑帽seo常用的劫持方法。特意解密出來供大家了解其劫持原理。感興趣的朋友一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
eval函數(shù)會將 obj 當(dāng)做代碼去執(zhí)行一遍，下面舉個例子為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
下面小編就為大家?guī)硪黄獪\談js中的this問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript實(shí)現(xiàn)無阻塞加載的常用方式
在 JavaScript 中,無阻塞加載（Non-blocking Loading）是優(yōu)化網(wǎng)頁性能的關(guān)鍵技術(shù),通過避免腳本阻塞頁面渲染和其他資源的加載,提升用戶體驗(yàn),以下是實(shí)現(xiàn)無阻塞加載的常用方法及示例,需要的朋友可以參考下2025-03-03
HTML5之WebSocket入門3 -通信模型socket.io
socket.io能為程序員提供客戶端和服務(wù)端一致的編程體驗(yàn)，socket.io支持任何的瀏覽器，任何的Mobile設(shè)備。下面通過本篇文章給大家講解HTML5之WebSocket入門3 -通信模型socket.io，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了最常用的三款JS時間特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
一起來學(xué)習(xí)JavaScript的BOM操作
這篇文章主要為大家詳細(xì)介紹了JavaScript BOM操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03