首页
所有分类
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中判断函数是new还是()调用的区别说明
Apr 07 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jQuery实用技巧必备（下）
Nov 03 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
哈萨克斯坦购物网站(2) 约旦购物网站(1) 冰岛购物网站(1) DB面试题(126) 白俄罗斯购物网站(3) 保加利亚购物网站(3) PHP面试题(54) Android面试题(6) C++面试题(199) JAVA面试题(401)
You might like
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
redis+php实现微博（一）注册与登录功能详解
2019/09/23 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
Javascript 之封装（Package）
2018/09/14 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
js实现点击烟花特效
2020/10/14 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python调用.NET库的方法步骤
2019/12/27 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
质量工程师岗位职责
2013/11/16 职场文书
新三好学生主要事迹
2014/01/23 职场文书
家长通知书教师评语
2014/04/17 职场文书
审计专业自荐信范文
2014/04/21 职场文书
白酒营销策划方案
2014/08/17 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
golang定时器
2022/04/14 Golang