首页
所有分类
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 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
答谢词(97) 接收函(23) 计划书(118) 广播稿(323) 寄语(276) 证明书(326) 教学反思(909) 方案(1080) 制度(225) 感言(394)
You might like
javascript不同页面传值的改进版
2008/09/30 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python的条件语句与运算符优先级详解
2015/10/13 Python
python使用生成器实现可迭代对象
2018/03/20 Python
python模块smtplib学习
2018/05/22 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
基于pip install django失败时的解决方法
2018/06/12 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python中return的返回和执行实例
2019/12/24 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
澳大利亚领先的男装零售连锁店：Lowes
2020/08/07 全球购物
初一学生评语大全
2014/04/24 职场文书
环境整治工作方案
2014/05/18 职场文书
计算机专业自荐信
2014/05/24 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
普通党员整改措施
2014/10/24 职场文书
2014年保密工作总结
2014/11/22 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
让生命充满爱观后感
2015/06/08 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript