Virtual Keyboard using HTML5 CSS and JS

A virtual keyboard is the on-screen input method to fill input fields just like a physical keyboard. It is a useful tool to type text using the mouse or another pointing device in the case of the unavailability of a physical keyboard. Besides this, a virtual keyboard can be used for various purposes in a visual interface. This tutorial explains how you can create a virtual keyboard using HTML5, CSS, and JavaScript for web apps.

The design of this keyboard is quite similar to the Android keyboard. Anyhow, you can highly customize it with CSS according to your needs. Similarly, you can integrate this virtual keyboard to any input/textarea even in the login or registration form.

This virtual keyboard function is written in Vanilla JavaScript that does not depend on any library. The only dependency is Material Icons that are used in the keyboard keys. You can check its final output in action on the demo page.

HTML code for Virtual Keyboard

Basically, the JavaScript file of the keyboard renderers HTML structure for the keyboard. So, you don’t need to create anything manually for the keyboard. Anyhow, the keyboard keys icons depend upon Google Material icons. Therefore, load the Google material Icons CSS and keyboard JavaScript file into the head tag of your HTML page.

<!-- Material Icons CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Keyboard JS -->
<script src="js/keyboard.js"></script>

After that, you need to create an input where the virtual keyboard attached. So, create the HTML textarea element with a class name “use-keyboard-input”.

<textarea class="use-keyboard-input"></textarea>

Or you can also create an input tag with type text as follows:

<input type="text" class="use-keyboard-input"/>

Basically, you can attach this virtual keyboard to any input/textarea. You just need to add a class name "use-keyboard-input" to your existing input.

Styling the Keyboard with CSS

As we mentioned above, the keyboard HTML will be appended with JavaScript, anyhow you can style/customize each part of the keyboard with CSS. So, target the very first element "keyboard" class that is the container of the virtual keyboard. Keep its fixed position and set o value for the bottom. Likewise, define other necessary CSS properties as mentioned in the below snippet:

.keyboard {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    background: #004134;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    user-select: none;
    transition: bottom 0.4s;
}

We’ll show the keyboard on the input focus event, so it should be hidden by default. In order to make a sliding (from bottom to top) effect, define the -100% value for the bottom property.

.keyboard--hidden {
    bottom: -100%;
}

The "keyboard__keys" is the wrapper class for the keys. Use the CSS text-align property to align all keys to the center of the keyboard.

.keyboard__keys {
    text-align: center;
}

Now, define the style for the keyboard key. Keep the relative position, set 45px height along with 6% width. Similarly, define the background color, font-size, and other CSS properties as follows:

.keyboard__key {
    height: 45px;
    width: 6%;
    max-width: 90px;
    margin: 3px;
    border-radius: 4px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.05rem;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

Target the keyboard key with an active pseudo selector to style it when the key pressed. You can set a custom background color for the active key.

.keyboard__key:active {
    background: rgba(255, 255, 255, 0.12);
}

We have two classes for the wide size of the keys. The "keyboard__key--wide" class is for the shift key whereas the "keyboard__key--extra-wide" class for the space key. You can set the custom CSS styles for these keys in order to customize them.

.keyboard__key--wide {
    width: 12%;
}
.keyboard__key--extra-wide {
    width: 36%;
    max-width: 500px;
}

Now we need an indicator that shows when the shift keys activated. Define its 8px width & height along with 50% border-radius property. Similarly, define the background color as described below:

.keyboard__key--activatable::after {
    content: '';
    top: 10px;
    right: 10px;
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}
.keyboard__key--active::after {
    background: #08ff00;
}

The "keyboard__key--dark" is the extra class for the dark keys. Define the color for the dark key class and done.

.keyboard__key--dark {
    background: rgba(0, 0, 0, 0.25);
}

That’s all! I hope this tutorial was helpful to create a virtual keyboard using HTML5, CSS, and JavaScript. If you have any questions or suggestions, let me know by comment below.