java弹出虚拟键盘_JS实现电脑虚拟键盘的操作

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

需求:

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

0493ec782087f881f0997a30ab6ffe10.png

4220d93c41a4d14f7f8b05ad216e5cc4.png

2.在输入框输入内容时,键盘跟着变化

4a4a744a6052702e0c90d028dcccc408.png

具体实现代码如下:

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 += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '9') {

template += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '220') {

template += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '20') {

template += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '13') {

template += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '16') {

template += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '16') {

template += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '17') {

template += "

" + keyArray[i].key_name + "
";

} else if (keyArray[i].key_val == '36') {

template += "

" + keyArray[i].key_name + "
";

}

else if (keyArray[i].key_val == '32') {

template += "

" + keyArray[i].key_name + "
";

}

else {

template += "

" + keyArray[i].key_name + "
";

}

}

// 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'

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Mahout:入门

最近&#xff0c;我有一个有趣的问题要解决&#xff1a;如何使用自动化对不同来源的文本进行分类&#xff1f; 前一段时间&#xff0c;我读到一个有关该项目以及许多其他文本分析工作的项目– Apache Mahout 。 尽管它不是一个非常成熟的版本&#xff08;当前版本为0.4 &#x…

Javascript中最常用的55个经典技巧(转)

1. οncοntextmenu"window.event.returnValuefalse" 将彻底屏蔽鼠标右键 <table border οncοntextmenureturn(false)><td>no</table> 可用于Table 2. <body onselectstart"return false"> 取消选取、防止复制 3. οnpaste"…

向数组添加元素 java_java如何向数组里添加元素

向数组里添加一个元素怎么添加&#xff0c;这儿总结有三种方法&#xff1a;1、一般数组是不能添加元素的&#xff0c;因为他们在初始化时就已定好长度了&#xff0c;不能改变长度。但有个可以改变大小的数组为ArrayList&#xff0c;即可以定义一个ArrayList数组&#xff0c;然后…

JBoss Drools –入门

这篇文章是关于我如何掌握JBoss Drools的 。 其背后的原因是&#xff1a;SAP收购了我公司当前的规则引擎&#xff0c;而Drools是我们将寻找的另一种选择&#xff0c;只要有人掌握了概念验证的技能即可。 尽管似乎有大量的文档&#xff0c;但是我总是会通过示例来发现它是有帮助…

android使用bintray发布aar到jcenter

前言 这两天心血来潮突然想把自己的android library的aar放到jcenter里面&#xff0c;这样一来自己便可以在任何时间任何地点通过internet得到自己的library的引用了&#xff0c;况且现在android studio已经默认使用jcenter的repositories作为依赖来源&#xff0c;以前的mavenc…

Java不是文明语言吗?

几周前&#xff0c;我有机会学习iOS编程。 我的老板认为我更像是“计算机科学家”&#xff0c;而不是开发人员&#xff0c;这意味着我可以将自己的知识应用于开发一两个iPad应用程序–我要做的就是学习Objective-C&#xff0c; iOS SDK&#xff1a;到底有多难&#xff1f; 尽管…

PHP 进程详解

PHP 进程详解PHP 进程详解 如下内容从《操作系统精髓与设计原理》中总结提炼得出&#xff0c;删除了大部分对于理解进程有干扰的文字&#xff0c;对进程知识结构进行的梳理。几乎所有内容为按照书本上摘抄下来的&#xff0c;我目前还总结提炼不出像作者这么深刻的见解。那么就先…

35. Search Insert Position

public class Solution {public int searchInsert(int[] nums, int target) {int lennums.length;int i0;for(;i<len;i){if(nums[i]>target)break;}return i;} } 转载于:https://www.cnblogs.com/aguai1992/p/5351442.html

MySQL 后from多个表_MYSQL回顾(多表查询相关)

前言简单的数据我们可以直接从一个表中获取&#xff0c;但在真实的项目中查询符合条件的数据通常需要牵扯到多张表&#xff0c;这就不得不使用多表查询。多表查询分为多表连接查询、符合条件链接查询、子查询。多表连接查询包括内连接、外连接、全连接。符合条件连接查询本质上…

玩! 框架+ Google Guice

在我目前正在工作的项目中&#xff0c;我们开始使用Google Guice。 对于那些不知道的人&#xff0c; Google Guice是一个依赖项注入框架。 依赖项注入背后的基本思想是提供一个它依赖的类&#xff0c;而不是使依赖类负责实例化它所依赖的对象。 Play具有用于整合Guice的模块&am…

java都要caps标点_第 1 章 管理 Java CAPS 用户

第 1 章 管理 Java CAPS 用户在此处列出的主题提供了有关如何管理 Sun JavaTM Composite Application Platform Suite (Java CAPS) 中的用户的信息。如果您有任何问题&#xff0c;请参见 http://goldstar.stc.com/ 中的 Java CAPS Web 站点。管理系统信息库用户此类别包含以下用…

基于OpenCV 的美颜相机推送直播流

程序流程&#xff1a; 1.图像采集 先从opencv&#xff08;2.4.10版本&#xff09;采集回来摄像头的图像&#xff0c;是一帧一帧的 每一帧图像是一个矩阵&#xff0c;opencv中的mat 数据结构。 2.人脸的美化 人脸美化&#xff0c;我们用的皮肤检测&#xff0c;皮肤在颜色空间是特…

Linux驱动开发常用头文件

头文件目录中总共有32个.h头文件。其中主目录下有13个&#xff0c;asm子目录中有4个&#xff0c;linux子目录中有10个&#xff0c;sys子目录中有5个。这些头文件各自的功能如下&#xff1a; 1、主目录 <a.out.h>&#xff1a;a.out头文件&#xff0c;定义了a.out执行文件格…

Spring线程池服务

线程池对于执行同步和异步过程非常重要。 本文介绍如何使用Spring开发和监视线程池服务。 创建线程池已通过两种替代方法进行了说明。 二手技术 &#xff1a; JDK 1.6.0_21 Spring3.0.5 Maven的3.0.2 步骤1&#xff1a;建立已完成的专案 创建一个Maven项目&#xff0c;如下…

我的世界java村民繁殖_我的世界:Java19w08a更新,村民加强守卫,小狐狸背叛

虽然这句话很绕口&#xff0c;其实意思很简单&#xff0c;那就是之前的隐身药水没有什么用&#xff0c;该被打还是被打。因为这个可是害惨了流浪商人&#xff0c;不过这次好了&#xff0c;流浪商人在喝了隐身药水之后就能安全度过晚上了。NO.3 皮革马铠马铠是属于马的盔甲&…

欧莱雅眉笔banner个人设计

眉笔名称&#xff1a;眉笔大师三头塑形眉笔 &#xff0c;之所以没用吧这个商品名称放大&#xff0c;是我觉得它是一个名称&#xff0c;而我把自己想的广告词“出彩只需一笔” 放大不仅能凸显出这只笔的强大&#xff0c;还表示了一种有了我这支眉笔你会更出彩更漂亮&#xff0c…

使用带有注释和JQuery的Spring MVC 3的Ajax

与Ajax一起工作对我来说一直很有趣&#xff01; 是不是 &#xff1f; 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用。 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax。 和往常一样&#xff0c;我们将在Spring MVC 3框架中以Ajax的实际示例为例&#xff0c;并将其…

ThinkPHP 3 的输出

一、ThinkPHP 3 的输出 &#xff08;重点&#xff09;a、通过 echo 等PHP原生的输出方式在页面中输出b、通过display方法输出想分配变量可以使用assign方法c、修改左右定界符休要修改配置文件中的配置项TMPL_L_DELIM><{, //修改左定界符TMPL_R_DELIM>}>, //修…

java百度云文件上传_关于如何在自己项目集成百度云BCE文件上传STS方案

1、 项目背景由于本人项目需要&#xff0c;需要在视频点播服务之中需要加载字幕文件(通用格式srt)&#xff0c;经过比较好几家的公有云服务&#xff0c;最后选择只有百度云提供字幕服务。字幕&#xff1a;我们通常在观看外语电影的是&#xff0c;没有国语版时候只能通过下载字幕…

Java 7 – NIO文件革命

Java 7&#xff08;“项目代币”&#xff09;已于去年7月问世。 此版本中的新增功能很有用&#xff0c;例如&#xff0c;尝试使用资源–从try块自动处理可关闭的资源&#xff0c;switch语句中的字符串&#xff0c;用于异常的multicatch以及用于使用泛型的<>运算符。 每个…