Creating a Keyboard With CSS and jQuery

Sometimes it's just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes "action" keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I'll show you how to build it today and it could also be a good jQuery virtual keyboard example.

Wondering what a jQuery mobile virtual keyboard looks like? Here's the final preview of the HTML and CSS keyboard key we're going to build:

Please accept marketing cookies to load this content.

Now that you know how a jQuery mobile virtual keyboard looks like, let's begin.

1. Create the Basic HTML and Files

This keyboard requires a lot of HTML setup and playing around with CSS. Each of the keys will be represented by a list item in an unordered list. Each list item will have a class attached to it, used in both the CSS and jQuery. Most of the classes are just letter, lastitem, or something similar. This will make it easy to find out which list item is which.

Make sure you have set up a folder wherever you are going to be using this keyboard. In this new folder, create an index.html file along with a css and a js folder. Finally, create a keyboard.js file in the js folder and a style.css file in the css folder.

my-keyboard-folder/
├── index.html
├── css/
│   └── style.css
└── js/
    └── keyboard.js

In the HTML file, we'll be including two JavaScript files and one CSS file. Inside the body tag there will be a huge unordered list containing all the letters, numbers, and some "action" keys. The HTML will also have a textarea in it with an id of keyboard. This will be the place where all the characters are added. The below code should be placed inside the index.html file.

<!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>Online Keyboard</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <div id="container">
    <textarea id="write" rows="6" cols="60"></textarea>
    <ul id="keyboard">
        <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
        <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
        <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
        <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
        <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
        <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
        <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
        <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
        <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
        <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
        <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
        <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
        <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
        <li class="delete lastitem">delete</li>
        <li class="tab">tab</li>
        <li class="letter">q</li>
        <li class="letter">w</li>
        <li class="letter">e</li>
        <li class="letter">r</li>
        <li class="letter">t</li>
        <li class="letter">y</li>
        <li class="letter">u</li>
        <li class="letter">i</li>
        <li class="letter">o</li>
        <li class="letter">p</li>
        <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
        <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
        <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
        <li class="capslock">caps lock</li>
        <li class="letter">a</li>
        <li class="letter">s</li>
        <li class="letter">d</li>
        <li class="letter">f</li>
        <li class="letter">g</li>
        <li class="letter">h</li>
        <li class="letter">j</li>
        <li class="letter">k</li>
        <li class="letter">l</li>
        <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
        <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
        <li class="return lastitem">return</li>
        <li class="left-shift">shift</li>
        <li class="letter">z</li>
        <li class="letter">x</li>
        <li class="letter">c</li>
        <li class="letter">v</li>
        <li class="letter">b</li>
        <li class="letter">n</li>
        <li class="letter">m</li>
        <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
        <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
        <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
        <li class="right-shift lastitem">shift</li>
        <li class="space lastitem">&nbsp;</li>
    </ul>
</div>
  
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>

You won't have to worry too much about the classes on the list items for now. I'll explain them more when we're using jQuery. However, some of the classes (like right-shift and lastitem) are just there because of the CSS we'll be using.

2. Make the List Pretty With CSS

The JavaScript for the keyboard would work perfectly fine without any CSS, but it wouldn't look like a keyboard. I'm not going to explain every style because a lot of them are pretty self-explanatory, but there are a couple that I will go over. Save the following CSS in the style.css file located in the css folder.

* {
margin: 0;
padding: 0;
}

body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}

#container {
margin: 100px auto;
width: 688px;
}

#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
border-radius: 5px;
}

#keyboard {
margin: 0;
padding: 0;
list-style: none;
}

    #keyboard li {
    float: left;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    border-radius: 5px;    
    }
    
        .capslock, .tab, .left-shift {
        clear: left;
        }
        
            #keyboard .tab, #keyboard .delete {
            width: 70px;
            }
            
            #keyboard .capslock {
            width: 80px;
            }
            
            #keyboard .return {
            width: 77px;
            }
            
            #keyboard .left-shift {
            width: 95px;
            }
            
            #keyboard .right-shift {
            width: 109px;
            }
            
        .lastitem {
        margin-right: 0;
        }
        
        .uppercase {
        text-transform: uppercase;
        }
        
        #keyboard .space {
        clear: left;
        width: 681px;
        }
        
        .on {
        display: none;
        }
        
        #keyboard li:hover {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
        }

Take notice of the following styles because they are very important.

.on: In some of the list items, there are two spans. These are the keys that have more than one character per key, like the numbers. The span with the on class will be hidden. This changed when a user clicks on the shift key, but more on that later with the JavaScript.
.lastitem: The last key in any row will have its right margin zeroed out so the layout won't break.

3. Bringing the Keys to Life With JavaScript

If you were to click on a list item now, nothing would happen. We're about to fix that with a little jQuery. The main idea we'll be using is to attach a click handler to each of the list items, grab the text when clicked, and do some magic to it depending on the list item's class. From here on out, all the JavaScript code will go into the keyboard.js file.

The Setup

We need to open up jQuery and define three variables that will be used through the code. These variables are the textarea, a shift status, and a caps lock status.

$(function(){
    var $write = $('#write'),
		shift = false,
		capslock = false;
	
	// The rest of the code goes here.
});

What comes next is attaching the click handler to all the list items (keys). Two variables are set up when the key is clicked. $this is defined just to require less typing from us, and character is defined as the HTML of the list item. If the list item is a letter, nothing will happen to this variable, and it will be returned.

$('#keyboard li').click(function(){
    var $this = $(this),
		character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
	
	// Code for processing the key.
}

The Shift Key and Caps Lock

If the shift key (list items with the class of left-shift or right-shift) is clicked, we want to toggle the uppercase class of each letter. Then, for the list items with a class of symbol, we want to toggle the display between the nested span tags. What we want to do next is set shift to the opposite boolean value (if it's true set it to false, and vice versa), and the caps lock variable to false, and finally return false so as not to do anything else with the character variable.

// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
    $('.letter').toggleClass('uppercase');
	$('.symbol span').toggle();
	
	shift = (shift === true) ? false : true;
	capslock = false;
	return false;
}

Now, if the caps lock key is clicked, we will toggle the uppercase class on letter list items, set the caps lock variable to true, and return false.

// Caps lock
if ($this.hasClass('capslock')) {
    $('.letter').toggleClass('uppercase');
	capslock = true;
	return false;
}

The Delete Key

For the delete key, we need to assign another variable: html—the contents of what's currently in the textarea. Once we have that, we set the new HTML of the textarea to everything but the last character. This is done with JavaScript's substr method. Once again, we return false so as not to run anything else.

// Delete
if ($this.hasClass('delete')) {
    var html = $write.html();
	
	$write.html(html.substr(0, html.length - 1));
	return false;
}

Special Characters

For all the list items which aren't a letter and aren't one of the "actions" keys, we change the character variable to something special. For a list item with the symbol class, character is set to the contents of whatever span is visible. A space character is (obviously) used for the space bar. The tab character is represented by \t, and finally a new line (the return key) is \n.

// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";

Uppercase Letters

If you can remember when we handled the shift and caps lock keys, an uppercase class was either added or removed using the toggleClass function. If the uppercase class is found, the character is converted to its uppercase form with the help of the toUpperCase method.

1	// Uppercase letter
2	if ($this.hasClass('uppercase')) character = character.toUpperCase();

The Aftermath

On a normal keyboard, you usually only need the shift key for one letter. If the shift variable is found to be set to true, we want to toggle the display of the symbol's spans. What also happens is that if the caps lock key is "on", the letters are once again toggled between uppercase and lowercase.

To finish off, the character is added to the textarea, and the user can continue "typing".

// Remove shift once a key is clicked.
if (shift === true) {
    $('.symbol span').toggle();
	if (capslock === false) $('.letter').toggleClass('uppercase');
	
	shift = false;
}

// Add the character
$write.html($write.html() + character);

Keyboard — The completed keyboard. This is how a completed jQuery on screen keyboard looks.

Conclusion

Sometimes it's nice to play around, even if the final product isn't truly "real world." By applying a few classes to our list items, we were able to create a keyboard powered by CSS and jQuery. You might have also learnt some JavaScript keyboard shortcuts for jQuery. The keyboard isn't totally useless. I've seen websites where there's an option for an on-screen keyboard. But mostly, this allows us to gain a better understanding of the capabilities of CSS and jQuery. Use what we created here as a good jQuery virtual keyboard example.

This post has been updated with contributions from Kingsley Ubah and Janila Castañeda. Kingsley is passionate about creating content that educates and inspires readers. Hobbies include reading, football and cycling. Janila is a staff writer for Envato Tuts+.