利用JavaScript實現(xiàn)創(chuàng)建虛擬鍵盤的示例代碼

更新時間：2022年09月04日 09:06:07 作者：海擁

這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)創(chuàng)建虛擬鍵盤，文中的示例代碼講解詳細，對我們學習JavaScript有一定幫助，需要的可以參考一下

前言

項目基本結構

目錄結構如下：

這是一個簡單的 JavaScript 教程，教你如何創(chuàng)建JavaScript 虛擬鍵盤。虛擬鍵盤是一種屏幕輸入法，如果你使用的是 Windows 操作系統(tǒng)，我相信你應該也使用過 Windows 中的默認虛擬鍵盤。

首先，我創(chuàng)建了一個可以看到輸入字符的結果框，也就是我們可以在其中看到所有信息的顯示器。此虛擬鍵盤上還有另一個包含許多按鈕的框。包括有許多字母按鈕、一個空格和一個退格。

這個現(xiàn)代 Javascript 虛擬鍵盤非常容易創(chuàng)建。但是為此，你需要對 HTML、CSS 和 javascript 有一個基本的了解。

JavaScript 虛擬鍵盤的顯示

現(xiàn)在我已經(jīng)創(chuàng)建了顯示，這個 javascript 數(shù)字小鍵盤的顯示寬度是 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;
}

顯示效果

虛擬鍵盤的按鈕

現(xiàn)在必須將所有按鈕添加到虛擬鍵盤。在這里，我根據(jù)我的要求添加了一些按鈕。

<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 效果添加到按鈕中。也就是說，當您單擊按鈕時，按鈕會發(fā)生變化。

CSS

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

使用 JavaScript 激活虛擬鍵盤

創(chuàng)建了上面的屏幕虛擬鍵盤的設計，但是它還沒有生效。首先我們確定一些 HTML 元素的常量。正如我們所知，我們不能直接在 JavaScript 中使用任何 HTML 元素。

在實現(xiàn)這個虛擬鍵盤 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')
        }
    }
})

現(xiàn)在您必須用鼠標執(zhí)行按鈕。這意味著您可以使用鼠標手動單擊這些按鈕，并且可以在信息結果框中找到該按鈕。

for(let x of button){
//當用戶按下鼠標按鈕時發(fā)生 MouseDown
    x.addEventListener('mousedown' , function(){
        x.className='active'
        p.innerHTML+=x.innerHTML
    })
}
//MouseUp 在用戶釋放鼠標按鈕時發(fā)生
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 屬性在元素上按下鼠標按鈕時觸發(fā)
Backspace.onmousedown=back
//當用戶在元素上釋放鼠標按鈕時發(fā)生 onmouseup 事件
Backspace.onmouseup=function(){
    Backspace.classList.remove('active')
}

現(xiàn)在是時候為觸摸屏實現(xiàn)這個簡單的虛擬鍵盤了。這使您可以通過移動設備控制此數(shù)字鍵盤。

for(let x of button){
//touchstart 事件在用戶觸摸元素時發(fā)生
    x.addEventListener('touchstart' , function(){
        x.className='active'

    })
}
for(let y of button){
//當用戶將手指從元素上移開時發(fā)生 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')
})

上面我們以三種方式激活了這個虛擬屏幕鍵盤。請評論您如何喜歡這個虛擬鍵盤組件?？梢栽谖哪┑南螺d按鈕獲取 JavaScript 虛擬鍵盤的源碼。

以上就是利用JavaScript實現(xiàn)創(chuàng)建虛擬鍵盤的示例代碼的詳細內容，更多關于JavaScript虛擬鍵盤的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

js圖片自動輪播代碼分享(js圖片輪播)
這篇文章主要介紹了js圖片自動輪播代碼，利用圖片width顯示位置來播放圖片和利用數(shù)組放入圖片經(jīng)行輪播,需要的朋友可以參考下
2014-05-05
微信小程序入門教程
本篇文章主要介紹了微信小程序入門教程，現(xiàn)在分享給大家，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2016-11-11
javascript用defineProperty實現(xiàn)簡單的雙向綁定方法
這篇文章主要介紹了javascript用defineProperty實現(xiàn)簡單的雙向綁定方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
簡單JS代碼壓縮器
簡單JS代碼壓縮器...
2006-10-10
在JavaScript中驗證URL的新方法(2023版)
在JavaScript領域,URL 驗證方面有了新消息！多年來,人們一直在討論JavaScript沒有一種簡便的方法來驗證 URL,現(xiàn)在有了一種新方法URL.canParse(),需要的朋友可以參考下
2023-09-09
簡述JS中forEach()、map()、every()、some()和filter()的用法
JS中常常需要對數(shù)組進行遍歷、迭代操作,而我們常用的就是for語句對數(shù)組進行迭代,下面這篇文章主要給大家介紹了關于JS中forEach()、map()、every()、some()和filter()的用法,需要的朋友可以參考下
2022-05-05
如何用JS模擬實現(xiàn)數(shù)組的map方法
這篇文章主要介紹了如何用JS模擬實現(xiàn)數(shù)組的map方法，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
js實現(xiàn)網(wǎng)站首頁圖片滾動顯示
網(wǎng)站首頁圖片滾動顯示對于很多朋友都有很大的吸引,因為它可以帶來意想不到視覺沖擊效果，接下來本文也實現(xiàn)一下，感興趣的朋友可以參考下，或許對你學習js知識有所幫助
2013-02-02
js實現(xiàn)右下角可關閉最小化div(可用于展示推薦內容)
使用Javascript實現(xiàn)右下角可關閉最小化div，可以用于展示推薦內容，完整源代碼如下，感興趣的各位可以參下哈，希望對大家有所幫助
2013-06-06
淺談JavaScript find 方法不支持IE的問題
下面小編就為大家?guī)硪黄獪\談JavaScript find 方法不支持IE的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09