Create a Virtual Keyboard using HTML, CSS, and JS - Informatic Point

Create a Virtual Keyboard using HTML, CSS, and JS

In this tutorial, we’ll explore how to build a virtual keyboard using HTML, CSS, and JavaScript. A virtual keyboard can be a useful addition to web applications, especially those involving user input. We’ll create a responsive and interactive keyboard that allows users to simulate typing without a physical keyboard.

Read Also: How to Create BMP to PNG Converter

HTML Structure:

The HTML structure includes an output box for displaying typed content and a grid-based layout for the keyboard keys. Each key represents a character, including special keys for functionalities like backspace, space, and enter.

<div class="keyboard-container">
    <div class="output-box">
      <input type="text" id="output" style="font-size: 18px; padding: 10px; width: 100%; box-sizing: border-box; border: none;">
    <div class="keyboard">
      <div class="row">
        <button class="key tab">Tab</button>
        <button class="key">Q</button>
        <button class="key">W</button>
        <button class="key">E</button>
        <button class="key">R</button>
        <button class="key">T</button>
        <button class="key">Y</button>
        <button class="key">U</button>
        <button class="key">I</button>
        <button class="key">O</button>
        <button class="key">P</button>
      <div class="row">
	  <button class="key shift">Shift</button>
        <button class="key">A</button>
        <button class="key">S</button>
        <button class="key">D</button>
        <button class="key">F</button>
        <button class="key">G</button>
        <button class="key">H</button>
        <button class="key">J</button>
        <button class="key">K</button>
        <button class="key">L</button>
      <div class="row">
	  <button class="key capslock">Caps Lock</button>
        <button class="key">Z</button>
        <button class="key">X</button>
        <button class="key">C</button>
        <button class="key">V</button>
        <button class="key">B</button>
        <button class="key">N</button>
        <button class="key">M</button>
        <button class="key special backspace">Backspace</button>
      <div class="row">
        <button class="key special space">Space</button>
        <button class="key special enter">Enter</button>
        <button class="key special">Del</button>

Styling with CSS:

We’ll style the keyboard and output box for a clean and user-friendly appearance. This involves defining key styles, layout alignments, responsiveness, and adding visual elements like shadows and borders for better aesthetics.

    /* CSS Styles */
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;

    .keyboard-container {
      display: flex;
      flex-direction: column;
      align-items: center;

    .output-box {
      width: 80%;
      max-width: 500px;
      margin-bottom: 20px;
      padding: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 5px;
      border: 2px solid #ccc;

    .keyboard {
      display: grid;
      gap: 5px;
      justify-content: center;

    .row {
      display: flex;
      justify-content: center;
      margin-bottom: 5px;

    .key {
      width: 50px;
      height: 50px;
      margin: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      background-color: white;

    /* Adjustments for special keys */
    .key.special {
      background-color: #eee;

    .space {
      flex-grow: 1; /* Takes all available space */

    .enter {
      flex-grow: 1;

    .backspace {
      /* Adjust width as needed */
      width: 110px;
	.shift{/* Adjust width as needed */
      width: 110px;}
 .capslock{width:100px;} {
      background-color: #ddd;

JavaScript Functionality:

Using JavaScript, we’ll add functionality to the virtual keyboard. This includes handling key presses, updating the output box accordingly, implementing special keys for space, backspace, enter, delete, and introducing a Caps Lock toggle for uppercase and lowercase characters.

    // JavaScript
    const keys = document.querySelectorAll('.key');
    const output = document.getElementById('output');
    let capsLockActive = false;

    function toggleCapsLock() {
      capsLockActive = !capsLockActive;
      const capsLockButton = document.querySelector('.capslock');
      capsLockButton.classList.toggle('active', capsLockActive);
      const letters = document.querySelectorAll('.key:not(.special):not(.capslock)');
      letters.forEach(letter => {
        letter.textContent = capsLockActive ? letter.textContent.toUpperCase() : letter.textContent.toLowerCase();

    function handleKeyPress(event) {
      const keyPressed =;

      switch (keyPressed) {
        case 'Backspace':
          output.value = output.value.slice(0, -1);
        case 'Space':
          output.value += ' ';
        case 'Enter':
          output.value += '\n';
        case 'Delete':
          // Implement delete functionality
          console.log('Delete pressed');
        case 'Caps Lock':
          output.value += capsLockActive ? keyPressed.toUpperCase() : keyPressed.toLowerCase();

    keys.forEach(key => {
      key.addEventListener('click', handleKeyPress);


Building a virtual keyboard using HTML, CSS, and JavaScript offers a versatile input solution for web applications. This tutorial will guide you through creating an interactive and visually appealing virtual keyboard that enhances user experience.

Leave a Reply

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