Creating a Keyboard with CSS and jQuery

Jul 13th in JavaScript & AJAX by Vasili

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.

Author: Vasili

This is a NETTUTS contributor who has published 3 tutorial(s) so far here. Their bio is coming soon!

Step 1: 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 of the list items will have a class attached to them, used in both the CSS and jQuery. Most of the classes are just "letter", "lastitem", or something similar. This will make finding out which list item is which easy.

Make sure you have setup a folder wherever you are going to be using this keyboard. Inside 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.

Inside 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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></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.

Step 2: Making the List Pretty

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-explainitory, 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;
-moz-border-radius: 5px;
-webkit-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;
	-moz-border-radius: 5px;
	-webkit-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 jey in any row will have its right margin zeroed out so the layout won't break.

Step 3: Bringing the Keys to Life

If you were to click on a list item 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 setup when the key is clicked. $this is defined just to required 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 to not 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 as to not 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 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 to 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.

// Uppercase letter
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);

Final JavaScript Code

$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;
	
	$('#keyboard li').click(function(){
		var $this = $(this),
			character = $this.html(); // If it's a lowercase letter, nothing happens to this 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;
		}
		
		// Caps lock
		if ($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		}
		
		// Delete
		if ($this.hasClass('delete')) {
			var html = $write.html();
			
			$write.html(html.substr(0, html.length - 1));
			return false;
		}
		
		// 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 letter
		if ($this.hasClass('uppercase')) character = character.toUpperCase();
		
		// 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);
	});
});

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 CSS and jQuery powered keyboard. The keyboard isn't totally useless. I've seen websites were 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.

Check out some more great tutorials and articles that you might like

Create a Twitter-Like “Load More” Widget JavaScript & AJAX
A Different Top Navigation JavaScript & AJAX
Best of the Web – June 2008 Web Roundups

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

chrisberthe July 13th

nettuts on fire today.
( Reply )
Kiran July 13th

strange…..interesting tutorials and freebies all in one day!
( Reply )
Cory July 13th

The demo does nothing in opera 10
( Reply )
1. Bart July 17th
  
  Well the issue is quite obvious. You’re using opera.
  ( Reply )
Shane July 13th

I did something very similar to this on a recent project. It was for an intranet site used by people who had very little desk space for a keyboard. I modelled mine on the iPhone and it was a little ‘pop-up’ style keyboard.

Nice work.
( Reply )
Furley July 13th

it would be nice to have the keyrespond to keypresses in the same way they respond to clicks. but totally cool, Vasili.
( Reply )
vanderson July 13th

best
( Reply )
Soner Gönül July 13th

Thanks! Really good

http://sonergonul.com
( Reply )
Muhammad Adnan July 13th

yes , if it responds to keypress events , it would be great .
it is easily to detect the keypress events in jquery .
anyways ,, good tutorial.
i really liked it !
( Reply )
James Hogan July 13th

nice use of this keyword, sweet,
( Reply )
Vasili July 13th

Funny that you guys should say something about the keypress because I was playing around with that when I was first making it, but didn’t think you guys would like it.

Thanks for the comments!
( Reply )
Taylor Satula July 13th

This could add something cool like what shane said. I feel as though i should find some way to implement this
( Reply )
mmotorg July 13th

( Reply )
Edward S July 13th

The only application that i can think of for this is for those “Chapters” book store search stations. The replaced them with macs half a year ago and bought mac keyboards. The could have done away without the keyboard altogether with this nifty tool. Oh well.
( Reply )
1. Edward S July 13th
  
  sorry for the million typos.
  ( Reply )
Hayes Potter July 13th

What’s the point?
( Reply )
1. Edward S July 13th
  
  Agreed. As I said. The only application is in touch-screens. And playing around is always good.
  ( Reply )
2. Ethan July 13th
  
  Don’t be a downer, Hayes
  ( Reply )
3. Drew Douglass July 13th
  
  Helps when you read the article before commenting.
  
  Sometimes it’s just fun to play around with the programming languages we know and see what we can create.
  ( Reply )
  1. Vasili July 13th
    
    Thanks Drew, there seems to be a problem with people and my articles and not understanding the point to them when I clearly state it in the article.
  2. Yoosuf July 14th
    
    its useful one and i am agree with Drew, also
    
    @Vasili don’t get distracted, you’re inputs needed all the time for us
4. crysfel July 13th
  
  this is useful to protect our customers for a key-log program when they insert their password in our system
  ( Reply )
  1. DMC July 15th
    
    This is excellent, not only as an exercise, but it can be implemented in touchscreens and kiosks for user input. I worked on a project 2 years ago which would have benefited greatly from this, had I seen this tutorial then.
    
    If you can’t see the point, well, maybe you just can’t see…
Robert DeBoer July 13th

Sweet tutorial. It surely isn’t “real-world worthless”. It serves as a great primer for making your own wysiwyg editor and handling shift/return/delete events. This is one of those cool things it would be to have on a site (though maybe not every really happening, but hey, we geeks can dream, right?
( Reply )
Ethan July 13th

OMG it’s Vasili! I know you

Anyways, pretty sweet script here!
( Reply )
Joost July 13th

Doesn’t work for me in Chrome.. Nice tutorial however.
( Reply )
1. Joost July 13th
  
  Tried it a second time and now it works. Strange..
  ( Reply )
awake July 13th

nyce
( Reply )
Aayush July 13th

Sweet….
( Reply )
Andres July 13th

Totally cool!!!!
( Reply )
James July 13th

Nice work!

One thing: String.prototype.substr is deprecated. You should be using either substring() or slice() instead.
( Reply )
Ortega_x2 July 13th

Amazing!!!
( Reply )
Michael Irwin July 13th

Great work! might have to try it out. Would be cool if the button moved on key press (if you use the real keyboard).
( Reply )
Kevin Urrutia July 13th

great work
( Reply )
Stephen Daugherty July 13th

You should probably have the keystrokes be stored into a more standard html element (such as a div) and then make sure to output html for the special characters to make sure they behave consistently e.g.

if ($this.hasClass(’space’)) character = ‘ ’;
if ($this.hasClass(’return’)) character = “”;

Right now the behavior with the textarea is not consistent between browsers. As a test try to put more than one space between characters. Testing here it works as intended in Firefox but in IE it does not.
( Reply )
1. Stephen Daugherty July 13th
  
  that is:
  if ($this.hasClass(’space’)) character = ‘& nbsp;’;
  if ($this.hasClass(’return’)) character = “< /br>”;
  
  I guess nettuts does not catch encoding in comments?
  ( Reply )
Tam Nguyen July 13th

Very cool
( Reply )
fesh July 13th

This is great! Can be use in web-based POS. thansk!
( Reply )
Senthil Kumar July 13th

Nice Tutorial. Thanks

Senthil Kumar
designfellow.com
@designfellow
( Reply )
nico July 13th

well, i just tried the demo and must say: it’s shit…
added some space and it didn’t work. when i mark some letters and try to do an entry it didn’t work…..
nothing more than another useless jquery nonsense…
( Reply )
Gaurav Chandra July 13th

One major use I find is for the internet banking websites where the users input the passwords using this keyboard. It will help in protection from keyloggers where the user is accessing his bank from the cyber cafe.

One more thing can be done is to scramble the keys so that if someone is overlooking your shoulder without you knowing it, he might not be able to remember the exact positions of the keys next time he tried to use your password.

This is my opinion though. Very good article.
( Reply )
Nano July 13th

Awesome!
( Reply )
Shani July 13th

if you type inside the textbox then keyboard is not working. thats the problem
( Reply )
Dirceu Bimonti July 13th

Cool tut. The delete sometimes doesn’t work as expected, but is enough to get the point. Congrats!
( Reply )
Aria Rajasa July 13th

Yup, I can totally imagine this being used on a touch screen interface. This way, nothing will happen if the user press Ctrl+Alt+Del
( Reply )
Developnew July 14th

very cool….. thanks for sharing
( Reply )
saurabh shah July 14th

its awesome .. ! nice work Vasili
( Reply )
Fº July 14th

Nice tut! I had having fun playing with a touchscreen monitor, but i found a issue, when you tap/click or the round corner the key starts to shake (don’t know if this is well interpreted, as my English is a bit poor :s )
( Reply )
insic July 14th

cool! this is worth to be a plus tut. And its for free!
( Reply )
1. Yoosuf July 14th
  
  thats what i also wondering, but there was a Calculator . by Chris Coyier, was PLUSS tutorial
  ( Reply )
thijs July 14th

beautiful!
( Reply )
John M July 14th

that looks really cool. good work.
( Reply )
darkyndy July 14th

Nice, I’ve tested with FF 3.5 and there is a problem if you start typing using your keyboard, the script doesn’t work …
( Reply )
David Moreen July 14th

This is the coolest thing that I have done with jquery. I don’t think I can find a particle use for it but still it is cool.
( Reply )
mamjed July 14th

just a quick question, does any one know how to map the esc key? iv been trying to find a good solution for canceling out a lightbox with a button
( Reply )
Owen July 14th

That is f-ing awesome.
( Reply )
e11world July 14th

This is super amazing! You guys ROCK! Thank you Vasili
( Reply )
Webagentur July 14th

Very nice tutorial. Keep on the good work.
( Reply )
lawrence77 July 14th

After i delete the letters from backspace of (original) keyboard!!

The virtual keyboard u create stops working…
( Reply )
naesk July 14th

Excellent work & thanx for sharing
( Reply )
Vasili July 14th

Regarding the keyboard not working after you input characters (from your actual keyboard), I don’t know why it doesn’t work. I’ll try and fix it.
( Reply )
Richard July 15th

That’s really cool, would exceptional if the key strokes from the real keyboard hightlighted the keys on the screen.
( Reply )
Diego SA July 15th

Interesting thing to use. Really well done. I’d only fix the Shift button problem. When you click on Shift button and then click on a letter or number button, they return to what they were before. I’d keep the buttons changed while the user doesn’t click on Shift button again. Except for that, everything is awesome! Congratulations!
( Reply )
1. Vasili July 16th
  
  The only reason I’ve chosen to change them back is because most times, I’ll only need the shift key for one letter/symbol.
  ( Reply )
Myfacefriends July 15th

another unique tuts! thanks!
( Reply )
capzspace July 15th

Hi there
check out
http://juicybreakingnews.blogspot.com
Now
( Reply )
vamsi July 16th

Yo !!
Its Cool …will be using it in one of my sites !
( Reply )
abs July 16th

LOL that’s brilliant and well cool
( Reply )
Wim July 17th

Perhaps you could combine it with ‘retype’?

http://myyn.org/retype/jquery-retype/example/

This combined functionality makes a whole lot of sense to me, special keyboard mappings which are actually visible as you type.

My 2cw
( Reply )
ben chen July 17th

i think this is very good
( Reply )
Tim July 18th

very unique tutorial. thanks
( Reply )
megidon75mdn July 18th

( Reply )
знакомство July 19th

хотела бы с вами поообщаться поближе, снедать ровня вопросов по оформлению и обмену блогами, дозволено вообще поработать
( Reply )
Web Design Mumbai July 20th

this is simply mind blowing… great tut.
( Reply )
Mark @ AlchemyUnited.com July 20th

@Gaurav Chandra – Yeah, I was thinking the same thing, expect I wouldn’t just limit it to banking sites. Why not use it all the time? Keystroke tracking spyware would have some catching up to do then, eh?
( Reply )
themeheven July 20th

Nice contents really cool
( Reply )
John July 21st

There is a problem if you use both real keyboard and visual keyboard. Btw thanks for your nice tuts
( Reply )
KoLGe July 22nd

Thanks a lot. Great!
( Reply )
Arefin July 24th

Thanks a lot and Thanks in advance for some nice contents !
( Reply )
jcargoo August 5th

Hi,
There are some missing things like: keyboard arrows, tab button not working behind a typed word, return button is not working as designed (middle of w word, after typing a word) and so other small details. This can be taken into account by other people who want to improve the features. Otherwise it is a great work.
Thanks.
( Reply )
Thany August 13th

Next steps:

- Make it possible to repeat keys by holding them down (especially useful for the delete/backspace keys)
- Allow input of nonwestern characters, most notably asian languages that combine simplified characters into complex ones.

Second one may be a little hard tho
( Reply )
jawanda September 8th

good work but not works when someone deletes the text with backspace and again tries to write the text from keyboard nothing happens
( Reply )
Salman Khimani September 28th

what if i have multiple input fields to be filled with this keyboard?

I added below mentioned code after … to work with other input fields but it doesn’t work with other fields :

can u help me with this please?
( Reply )
Joe October 11th

Some Issues. But all in all pretty good tut
( Reply )
cos mashang October 26th

sweet Tut!
just one question if i wanted to use this to write to multiple fields , how would i go about doing that?
( Reply )
dr.emi November 10th

wow!!! very large code

it’s help me.
( Reply )
vinic November 18th

Great!
Hi~i come from Beijing~~
( Reply )

Add Your Comment

( GET A GRAVATAR )

Your Name
November 18th

Cancel

Tuts+	Tutorials & Resources
Psdtuts+	Photoshop & Graphics
Nettuts+	Web Design & Development
Vectortuts+	Vectors & Illustration
Audiotuts+	Music & Sound
Aetuts+	AfterEffects & Motion
Activetuts+	Flash Tutorials
Cgtuts+	Computer Graphics
Phototuts+	Photography

ActiveDen	Flash Marketplace
ThemeForest	Web & CMS Themes
GraphicRiver	Graphics, Vectors & Icons
VideoHive	Motion Graphics & Projects
AudioJungle	Loops & Effects

FreelanceSw	Freelance Jobs & Community
Rockable	Books & How-To
Creattica	Design Community
Mac.AppStorm	Mac Apps
Web.AppStorm	Web Apps
WorkAwesome	Be Awesome At Work
Envato	About Us

Creating a Keyboard with CSS and jQuery

Author: Vasili

Step 1: Basic HTML and Files

Step 2: Making the List Pretty

Step 3: Bringing the Keys to Life

The Setup

The Shift Key and Caps Lock

The Delete Key

Special Characters

Uppercase Letters

The Aftermath

Final JavaScript Code

Conclusion

Related Posts

Enjoy this Post?

Plus Members

User Comments

Add Your Comment

Subscribe

Write for us!

User Plus

Copyright & Usage

Write a Tutorial

Suggestions?

Related Sites