JS實現電腦虛擬鍵盤的操作

阿新 • • 發佈：2020-06-26

本文例項為大家分享了JS實現電腦虛擬鍵盤的具體程式碼，供大家參考，具體內容如下

需求：

1.當輸入框游標聚焦時，電腦虛擬鍵盤彈出

JS實現電腦虛擬鍵盤的操作

2.在輸入框輸入內容時，鍵盤跟著變化

JS實現電腦虛擬鍵盤的操作

具體實現程式碼如下：

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" rel="external nofollow" >
 <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': 'Ctrl','key_val': '17' },{ 'key_name': 'Alt','key_val': '18' },{ 'key_name': 'Home','key_val': '36 ' },{ 'key_name': 'Space','key_val': '32' },'key_val': '36' },{ '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'

});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。