脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript虚拟键盘

利用JavaScript实现创建虚拟键盘的示例代码

 更新时间：2022年09月04日 09:06:07   作者：海拥  
这篇文章主要为大家详细介绍了如何利用JavaScript实现创建虚拟键盘，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，需要的可以参考一下

前言

在线演示地址

项目基本结构

目录结构如下：

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

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

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

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;
}

显示效果

虚拟键盘的按钮

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

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

显示效果

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;
}

使用 JavaScript 激活虚拟键盘

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

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

let button = document.getElementsByTagName('button')
let p = document.getElementById('ip');
let space =document.getElementById('space')

let Backspace = document.getElementById('backspace')

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

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')
        }
    }
})

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

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')
}

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

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 虚拟键盘的源码。

以上就是利用JavaScript实现创建虚拟键盘的示例代码的详细内容，更多关于JavaScript虚拟键盘的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JS实现百度新闻导航栏效果

    JS实现百度新闻导航栏效果

    这篇文章主要为大家详细介绍了JS实现百度新闻导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • javascript htmlencode函数(ff兼容版) 主要是编辑器中反转html代码

    javascript htmlencode函数(ff兼容版) 主要是编辑器中反转html代码

    非常不错的htmlencode 方法，比用正则实现的更好，而且效率高，推荐使用第一种方法。
    2009-06-06
  • JavaScript数组去重的6个方法

    JavaScript数组去重的6个方法

    本篇文章主要介绍了JavaScript数组去重的6个方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 使用不同的方法结合/合并两个JS数组

    使用不同的方法结合/合并两个JS数组

    这是一篇关于JavaScript数组使用的一些技巧，我们将使用不同的方法结合/合并两个JS数组，以及讨论每个方法的优点/缺点
    2014-09-09
  • js中toString()和String()区别详解

    js中toString()和String()区别详解

    本文主要介绍了js中toSring()和Sring()的区别。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS基于VML技术实现的五角星礼花效果代码

    JS基于VML技术实现的五角星礼花效果代码

    这篇文章主要介绍了JS基于VML技术实现的五角星礼花效果代码,涉及JavaScript数学运算与页面元素动态操作的相关技巧,需要的朋友可以参考下
    2015-10-10
  • JS实现跟随鼠标的链接文字提示框效果

    JS实现跟随鼠标的链接文字提示框效果

    这篇文章主要介绍了JS实现跟随鼠标的链接文字提示框效果,涉及javascript鼠标事件及页面元素样式操作的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解

    这篇文章主要介绍了原生js中ajax访问的实例详解的相关资料,希望通过本文大家能够掌握理解这部分内容，需要的朋友可以参考下
    2017-09-09
  • js指定日期增加指定月份的实现方法

    js指定日期增加指定月份的实现方法

    这篇文章主要给大家介绍了关于js指定日期增加指定月份的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2018-12-12
  • 快速实现JS图片懒加载(可视区域加载)示例代码

    快速实现JS图片懒加载(可视区域加载)示例代码

    目前很多网站，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，下面本文就介绍了JS图片懒加载(可视区域加载)的实现方法，一起来看看吧。
    2017-01-01

最新评论