写点什么

开源一夏 | 如何在 JavaScript 中创建虚拟键盘

  • 2022 年 8 月 22 日
    安徽
  • 本文字数:3659 字

    阅读完需:约 12 分钟

开源一夏 | 如何在 JavaScript 中创建虚拟键盘

在线演示地址:https://haiyong.site/demo/key-board-online.html

码上掘金地址:https://code.juejin.cn/pen/7134327302242074631


源码也可在文末免费获取

✨ 项目基本结构

目录结构如下:


├── css│   └── style.css├── js│   └── script.js└── index.html
复制代码


这是一个简单的 JavaScript 教程,教你如何创建 JavaScript 虚拟键盘。虚拟键盘是一种屏幕输入法,如果你使用的是 Windows 操作系统,我相信你应该也使用过 Windows 中的默认虚拟键盘。


首先,我创建了一个可以看到输入字符的结果框,也就是我们可以在其中看到所有信息的显示器。此虚拟键盘上还有另一个包含许多按钮的框。包括有许多字母按钮、一个空格和一个退格。


这个现代 Javascript 虚拟键盘非常容易创建。但是为此,你需要对 HTML、CSS 和 javascript 有一个基本的了解。

步骤 1:JavaScript 虚拟键盘的显示

现在我已经创建了显示,这个 javascript 数字小键盘的显示宽度是 500px。由于这里使用了 Neumorphism 设计,因此在显示器周围使用了阴影。


HTML


<p id="ip"></p>
复制代码


CSS


*{    padding: 0;    margin: 0;    box-sizing: border-box;}
body{ background-color: rgb(26, 26, 26); font-family: sans-serif;}
复制代码


#ip{    width: 500px;    min-height: 30px;    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;    text-align: center;    color: white;    letter-spacing: 1px;    position: absolute;    top: 165px;    left: 50%;    margin: -50px auto;    transform:translateX(-50%) ;    font-size: 18px;    text-transform: capitalize;}
复制代码


显示效果


第 2 步:虚拟键盘的按钮

现在必须将所有按钮添加到虚拟键盘。在这里,我根据我的要求添加了一些按钮。


<div class="keybord">
<div class="row row1"> <button>Q</button> <button>W</button> <button>E</button> <button>R</button> <button>T</button> <button>Y</button> <button>U</button> <button>I</button> <button>O</button> <button>P</button> </div>
<div class="row row2"> <button>A</button> <button>S</button> <button>D</button> <button>F</button> <button>G</button> <button>H</button> <button>J</button> <button>K</button> <button>L</button> </div>
<div class="row row3"> <button>Z</button> <button>X</button> <button>C</button> <button>V</button> <button>B</button> <button>N</button> <button>M</button> </div>
<div class="row row4"> <div class="space" id="space">space</div> <div class="backspace" id="backspace">Backspace</div> </div>
</div>
复制代码


显示效果


第 3 步:CSS 的键盘按钮设计

首先,按钮的背景被赋予一个盒子的形状宽度:680 像素,每个按钮的宽度:50px,高度:50 像素.


CSS


.keybord{    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;    width: 680px;    margin:200px auto 50px;    display: flex;    flex-direction: column;    align-items: center;    padding:20px 20px;    border-radius: 10px;}
.row{ margin:5px ; user-select: none;}
button{ width: 50px; height: 50px; font-weight: bold; margin: 0 4px; border: none; background-color: transparent; color:white; box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black; border-radius: 5px; cursor: pointer;}
复制代码


显示效果



该 javascript 移动键盘 中尚未设计空格和退格按钮。我使用以下 CSS 设计了这些按钮。


.row4 , .backspace , .space{    display: flex;    align-items: center;    justify-content: center;}
.keybord .backspace , .space{ color: white; font-weight: bold; cursor: pointer; /* user-select: none; */}.backspace , .space{ border-radius: 5px; box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;}.keybord .space{ width: 300px; height: 50px; }.keybord .backspace { width: 100px; height: 50px; margin-left: 15px; }
复制代码



下面的 CSS 已将 onclick 效果添加到按钮中。也就是说,当您单击按钮时,按钮会发生变化。


CSS


.keybord .active{    box-shadow:inset -2px -2px 4px rgb(63, 63, 63) ,    inset 2px 2px 4px black;    color: yellow;}
复制代码

第 4 步:使用 JavaScript 激活虚拟键盘

创建了上面的屏幕虚拟键盘的设计,但是它还没有生效。首先我们确定一些 HTML 元素的常量。正如我们所知,我们不能直接在 JavaScript 中使用任何 HTML 元素。


在实现这个虚拟键盘 HTML 和 CSS 之前,让我来给大家一些信息。我们将以三种方式激活这些按钮。这意味着这个虚拟键盘可以通过鼠标、外接键盘和触摸三种方式进行控制。


JS


let button = document.getElementsByTagName('button')let p = document.getElementById('ip');let space =document.getElementById('space')
let Backspace = document.getElementById('backspace')
复制代码


我已安排使用下面的 JavaScript 使用外部键盘激活此虚拟键盘。这使您可以使用计算机的键盘来控制这个 javascript 虚拟键盘。


JS


document.body.addEventListener('keydown' , function(index){
for (let i=0 ; i <button.length ; i++) { //UpperCase() 方法返回转换为大写的字符串的值 if(button[i].innerHTML==index.key.toUpperCase()){ button[i].classList.add('active') }; }//innerHTML 属性是文档对象模型的一部分 p.innerHTML+=index.key if(index.key=='Backspace'){ p.innerHTML=p.innerHTML.slice(0 , -10) }})document.body.addEventListener('keyup' , function(index){ for(let j=0 ; j<button.length ; j++){ if(button[j].innerHTML == index.key.toUpperCase()){ button[j].classList.remove('active') } }})
复制代码


现在您必须用鼠标执行按钮。这意味着您可以使用鼠标手动单击这些按钮,并且可以在信息结果框中找到该按钮。


JS


for(let x of button){//当用户按下鼠标按钮时发生 MouseDown    x.addEventListener('mousedown' , function(){        x.className='active'        p.innerHTML+=x.innerHTML    })}//MouseUp 在用户释放鼠标按钮时发生for(let y of button){    y.addEventListener('mouseup' , function(){        y.className=''    })  }
space.addEventListener('mousedown',function(){ space.classList.add('active') p.innerHTML+=" "})space.addEventListener('mouseup',function(){ space.classList.remove('active')})
function back(){ Backspace.className+=' active' p.innerHTML=p.innerHTML.slice(0 , -1)}//onmousedown 属性在元素上按下鼠标按钮时触发Backspace.onmousedown=back//当用户在元素上释放鼠标按钮时发生 onmouseup 事件Backspace.onmouseup=function(){ Backspace.classList.remove('active')}
复制代码


现在是时候为触摸屏实现这个简单的虚拟键盘了。这使您可以通过移动设备控制此数字键盘。


JS


for(let x of button){//touchstart 事件在用户触摸元素时发生    x.addEventListener('touchstart' , function(){        x.className='active'
})}for(let y of button){//当用户将手指从元素上移开时发生 touchend 事件 y.addEventListener('touchend' , function(){ space.classList.remove('active') }) }space.addEventListener('touchstart',function(){ space.classList.add('active')
})space.addEventListener('touchend',function(){ space.classList.remove('active')})Backspace.addEventListener('touchstart',function(){ Backspace.className+=' active'
})Backspace.addEventListener('touchend',function(){ Backspace.classList.remove('active')})
复制代码


上面我们以三种方式激活了这个虚拟屏幕键盘。请评论您如何喜欢这个虚拟键盘组件。可以在文末的下载按钮获取 JavaScript 虚拟键盘的源码。


📑 完整源码下载⬇

码上掘金地址:https://code.juejin.cn/pen/7134327302242074631

发布于: 刚刚阅读数: 4
用户头像

公众号:海拥 2021.11.29 加入

【个人网站】haiyong.site 【联系方式】微信:wh18363 【软件技能】前端,Java,Python 【个人称号】InfoQ 写作社区签约作者,华为云享专家,CSDN原力作者,全栈领域优质创作者,掘金2021年度人气作者No.21

评论

发布
暂无评论
开源一夏 | 如何在 JavaScript 中创建虚拟键盘_JavaScript_海拥(haiyong.site)_InfoQ写作社区