给大家安利一个免费且实用的前端刷题(面经大全)网站,👉点击跳转到网站

在这里插入图片描述

在线演示地址:https://haiyong.site/demo/key-board-online.html\
码上掘金地址:https://code.juejin.cn/pen/7134327302242074631

源码也可在文末免费获取

✨ 项目基本结构

目录结构如下:

1
2
3
4
5
├── css
│ └── style.css
├── js
│ └── script.js
└── index.html

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

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

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

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

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

HTML

1
<p id="ip"></p>

CSS

1
2
3
4
5
6
7
8
9
10
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body{
background-color: rgb(26, 26, 26);
font-family: sans-serif;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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步:虚拟键盘的按钮

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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 设计了这些按钮。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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

1
2
3
4
5
.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

1
2
3
4
5
let button = document.getElementsByTagName('button')
let p = document.getElementById('ip');
let space =document.getElementById('space')

let Backspace = document.getElementById('backspace')

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

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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://mianbaoduo.com/o/bread/Yp6UmZZr

⭐️ 好书推荐

在这里插入图片描述

【内容简介】

科大讯飞校企合编教材,涵盖人工智能各个重要体系,详解人工智能基础理论,详细解读算法逻辑:详解机器学习、人工神经网络、智能语音识别、自然语言处理、知识图谱与机器人等核心算法知识,清晰介绍实战步骤:有理论有实战,介绍了人工智能算法与技术的实际应用,步骤清楚,条理清晰,即学即用。

📚 京东自营购买链接《人工智能导论》- 京东图书