首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 24, 2020

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

需求：

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

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

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" >
 <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': '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'

});

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

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

- Author -

Jeslie-He

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
2则自己编写的jQuery特效分享
Feb 26 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
JavaScript DOM基础
Apr 13 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 #Javascript
js实现html滑动图片拼图验证
Jun 24 #Javascript
微信小程序的引导页实现代码
Jun 24 #Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 #Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 #Javascript
javascript实现前端成语点击验证优化
Jun 24 #Javascript
vue各种事件监听实例(小结)
Jun 24 #Javascript
reduce()(1) 信号同步(1) 鲲鹏(1) 生命周期(1) Flask(2) GCN(1) PIL(1) 进度条(1) Python(3) 裁剪图片(1)
You might like
生成缩略图
2006/10/09 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
php语言注释，单行注释和多行注释
2018/01/21 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP7 新增功能
2021/03/09 PHP
JQuery for与each性能比较分析
2013/05/14 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
详解小程序如何避免多次点击，重复触发事件
2019/04/08 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Django celery异步任务实现代码示例
2020/11/26 Python
python 批量将中文名转换为拼音
2021/02/07 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
欧洲高端品牌直销店：Fashionesta
2016/08/31 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
毕业生自我鉴定实例
2014/01/21 职场文书
《日月潭》教学反思
2014/02/28 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
办公设备采购方案
2014/03/16 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
党的作风建设心得体会
2014/10/22 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
成绩单家长意见
2015/06/03 职场文书
企业培训简报范文
2015/07/20 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang