Virtual Keyboard using HTML, CSS and JavaScript

By /
Views: 45

In this post, we will create a simple virtual keyboard that can be used in web application. This virtual keyboard will include basic functionality for typing, visualizing keys, and handling input in an interactive way. We’ll use HTML for the structure, CSS for styling, and JavaScript for interactivity.

Step 1: HTML Structure

Let’s start by building the basic structure of our virtual keyboard. The HTML will consist of a container for the keyboard keys, and we will place the buttons inside it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Keyboard</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="textContainer">
    </div>
    <div class="keyboard">
        <div class="row">
            <div class="key">1</div>
            <div class="key">2</div>
            <div class="key">3</div>
            <div class="key">4</div>
            <div class="key">5</div>
            <div class="key">6</div>
            <div class="key">7</div>
            <div class="key">8</div>
            <div class="key">9</div>
            <div class="key">0</div>   
            <div class="key delete"><i class="fa-solid fa-delete-left"></i></div>
        </div>
        <div class="row">
            <div class="key">q</div>
            <div class="key">w</div>
            <div class="key">e</div>
            <div class="key">r</div>
            <div class="key">t</div>
            <div class="key">y</div>
            <div class="key">u</div>
            <div class="key">i</div>
            <div class="key">o</div>
            <div class="key">p</div>
        </div>
        <div class="row">
            <div class="key capslock">CapsLock</div>
            <div class="key">a</div>
            <div class="key">s</div>
            <div class="key">d</div>
            <div class="key">f</div>
            <div class="key">g</div>
            <div class="key">h</div>
            <div class="key">j</div>
            <div class="key">k</div>
            <div class="key">l</div>
            <div class="key enter">Enter</div>
        </div>
        <div class="row last">
            <div class="key">z</div>
            <div class="key">x</div>
            <div class="key">c</div>
            <div class="key">v</div>
            <div class="key">b</div>
            <div class="key">n</div>
            <div class="key">m</div>
        </div>
        <div class="row">
            <div class="key space"></div>
        </div>
    </div>
</body>
<script src="./script.js"></script>
</html>

Step 2: Styling the Keyboard with CSS

Now, let’s style the virtual keyboard with some simple CSS. We’ll make sure the keys are properly arranged and look like a typical keyboard.

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: whitesmoke;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    font-size: 1.5rem;
}

.textContainer{
    height: 18vh;
    width: 90vw;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px 1px grey;
    outline: none;
    padding: 2rem;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
}

.keyboard{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 50vh;
    width: 70vw;
    background-color: #696969;
    color: white;
    border-radius: 1rem;
}

.row{
    display: flex;
    justify-content: space-evenly;
    align-items: center;   
}

.last{
    width: 65%;
    margin: 0 auto ;
}

.space{
    background: #484848;
    width: 30%;
    height: 2rem;   
}

.key{
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 3px;

}

.key:active{
    background: #484848;
}

.active{
    background-color: #484848;
}

Step 3: Adding Interactivity with JavaScript

Now, we will add JavaScript to make the keyboard functional. The basic functionality will include inserting text into the textarea and handling the backspace key.

let textContainer = document.querySelector(".textContainer");
let deleteKey = document.querySelector(".delete");
let enterKey = document.querySelector(".enter");
let spaceKey = document.querySelector(".space");
let capsLock = document.querySelector(".capslock");
let allKey = document.querySelectorAll(".key");
let isCaps = false;

deleteKey.addEventListener("click",function(){
    let textContainerContent = textContainer.innerText;
    if(textContainerContent.length == 0){
        return;
    }
    console.log(textContainerContent);
    let newContent = textContainerContent.slice(0,textContainerContent.length-1);
    textContainer.innerText = newContent;
})

enterKey.addEventListener("click",function(){
    let content = textContainer.innerText;
    let newContent = content+"\n";
    textContainer.innerText = newContent;
})

spaceKey.addEventListener("click",function(){
    let content = textContainer.innerText;
    let newContent = content+ '\u00A0';
    textContainer.innerText = newContent;
})

capsLock.addEventListener("click",function(){
    if(isCaps){
        capsLock.classList.remove("active");
        for(let key of allKey){
            if(key.classList.contains("delete") || key.classList.contains("enter")||
             key.classList.contains("space") || key.classList.contains("capslock")){
                //nothing
            }else
                key.innerText = key.innerText.toLowerCase();
        }
    }else{
        capsLock.classList.add("active");
        for(let key of allKey){
                if(key.classList.contains("delete") || key.classList.contains("enter")||
                 key.classList.contains("space") || key.classList.contains("capslock")){
                    //nothing
                }else
                    key.innerText = key.innerText.toUpperCase();
            }
        }
    isCaps=!isCaps
})

for(let key of allKey){
    key.addEventListener("click",function(){
        if(key.classList.contains("delete") || key.classList.contains("enter")||
         key.classList.contains("space") || key.classList.contains("capslock")){
            return;
        }
        textContainer.innerText += key.innerText;
    })
}

Step 4: How It Works

  • HTML: We define the structure of the virtual keyboard, where each key is a button inside a row. The keys are labeled with letters, and we also have a “Space” and “Backspace” key.
  • CSS: The keys are styled to look like typical keyboard buttons, with a flex layout for the rows and hover/active states to enhance user interaction.
  • JavaScript: When a key is pressed, we either append the corresponding character to the textarea, add a space when the “Space” key is clicked, or remove the last character when the “Backspace” key is clicked.

Output

Virtual Keyboard Output

Conclusion

Building a virtual keyboard with HTML, CSS, and JavaScript is a fun and practical exercise for web developers. It’s a great way to learn about handling user interactions, manipulating the DOM, and creating accessible input methods. This simple project can also serve as a foundation for more complex features, such as multi-language support, dynamic key layouts, and more.

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top