Creating a Virtual jQuery Keyboard

Written by Kishore Nallan, On 22nd October 2008.
Filed in JavaScript.

jQuery Keyboard For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Before I begin, let me show you how it will all look in the end.

Basic HTML and CSS Setup

Ok, let’s get started. We start off with a plain, old login form with username and password fields and a login button. We add a link which will show/hide the virtual keyboard when clicked.

Note: For the purpose of demonstration, I have actually used a normal text field instead of a password type text field!

<h3>Login form</h3> 
<form action="" method="post" id="loginform">
 
<label for="username">Username:</label>
 
<input type="text" name="username" id="username" /> 
<label for="pwd">Password:</label> 
<input type="text" name="pwd" id="pwd"/> 
<a href="#" id="showkeyboard" title="Type in your password using a virtual keyboard.">Keyboard</a> <br /> 
<input type="submit" name="Submit" id="submit_butt" value="Submit" /> </form>

Next, it’s time to put in the XHTML for the keyboard in place. I just wanted to take a very simple approach, and thus ruled out generating the keys dynamically. I have just the four main rows of the standard keyboard (each enclosed in a DIV), along with their shift equivalents. So that means, a total of 8 rows, of which at any time (depending on whether the shift key is pressed or not), four of the rows would be visible, and the other four hidden.

<div id="keyboard">
<div id="row0">
<input name="accent" type="button" value="`" />
<input name="1" type="button" value="1" />
<input name="2" type="button" value="2" />
<input name="3" type="button" value="3" />
<input name="4" type="button" value="4" />
<input name="5" type="button" value="5" />
<input name="6" type="button" value="6" />
<input name="7" type="button" value="7" />
<input name="8" type="button" value="8" />
<input name="9" type="button" value="9" />
<input name="0" type="button" value="0" />
<input name=" - " type="button" value=" - " />
<input name="=" type="button" value="=" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row0_shift">
<input name="tilde" type="button" value="~" />
<input name="exc" type="button" value="!" />
<input name="at" type="button" value="@" />
<input name="hash" type="button" value="#" />
<input name="dollar" type="button" value="$" />
<input name="percent" type="button" value="%" />
<input name="caret" type="button" value="^" />
<input name="ampersand" type="button" value="&" />
<input name="asterik" type="button" value="*" />
<input name="openbracket" type="button" value="(" />
<input name="closebracket" type="button" value=")" />
<input name="underscore" type="button" value="_" />
<input name="plus" type="button" value="+" />
<input name="backspace" type="button" value="Backspace" />
</div>
 
<div id="row1">
<input name="q" type="button" value="q" />
<input name="w" type="button" value="w" />
<input name="e" type="button" value="e" />
<input name="r" type="button" value="r" />
<input name="t" type="button" value="t" />
<input name="y" type="button" value="y" />
<input name="u" type="button" value="u" />
<input name="i" type="button" value="i" />
<input name="o" type="button" value="o" />
<input name="p" type="button" value="p" />
<input name="[" type="button" value="[" />
<input name="]" type="button" value="]" />
<input name="\" type="button" value="\" />
</div>
 
<div id="row1_shift">
<input name="Q" type="button" value="Q" />
<input name="W" type="button" value="W" />
<input name="E" type="button" value="E" />
<input name="R" type="button" value="R" />
<input name="T" type="button" value="T" />
<input name="Y" type="button" value="Y" />
<input name="U" type="button" value="U" />
<input name="I" type="button" value="I" />
<input name="O" type="button" value="O" />
<input name="P" type="button" value="P" />
<input name="{" type="button" value="{" />
<input name="}" type="button" value="}" />
<input name="|" type="button" value="|" />
</div>
 
<div id="row2">
<input name="a" type="button" value="a" />
<input name="s" type="button" value="s" />
<input name="d" type="button" value="d" />
<input name="f" type="button" value="f" />
<input name="g" type="button" value="g" />
<input name="h" type="button" value="h" />
<input name="j" type="button" value="j" />
<input name="k" type="button" value="k" />
<input name="l" type="button" value="l" />
<input name=";" type="button" value=";" />
<input name="’" type="button" value="’" /> 
</div>
 
<div id="row2_shift">
<input name="a" type="button" value="A" />
<input name="s" type="button" value="S" />
<input name="d" type="button" value="D" />
<input name="f" type="button" value="F" />
<input name="g" type="button" value="G" />
<input name="h" type="button" value="H" />
<input name="j" type="button" value="J" />
<input name="k" type="button" value="K" />
<input name="l" type="button" value="L" />
<input name=";" type="button" value=":" />
<input name="’" type="button" value=’"’ />
</div>
 
<div id="row3">
<input name="Shift" type="button" value="Shift" id="shift" />
<input name="z" type="button" value="z" />
<input name="x" type="button" value="x" />
<input name="c" type="button" value="c" />
<input name="v" type="button" value="v" />
<input name="b" type="button" value="b" />
<input name="n" type="button" value="n" />
<input name="m" type="button" value="m" />
<input name="," type="button" value="," />
<input name="." type="button" value="." />
<input name="/" type="button" value="/" />
</div>
 
<div id="row3_shift">
<input name="Shift" type="button" value="Shift" id="shifton" />
<input name="Z" type="button" value="Z" />
<input name="X" type="button" value="X" />
<input name="C" type="button" value="C" />
<input name="V" type="button" value="V" />
<input name="B" type="button" value="B" />
<input name="N" type="button" value="N" />
<input name="M" type="button" value="M" />
<input name="lt" type="button" value="&lt;" />
<input name="gt" type="button" value="&gt;" />
<input name="?" type="button" value="?" />
</div>
 
<div id="spacebar">
<input name="spacebar" type="button" value=" " />
</div>
 
</div>

I have taken care to represent characters which have special meaning in HTML, like “<” using entities.

The CSS

I have kept the CSS styling very minimal. Of course, if you want your keyboard to look like a dragon, you can go ahead and all that jazz! We set the display property of div enclosing the keyboard to be “none” initially, as we don’t want it to show up till the user activates it by clicking on the “Keyboard” link. In addition, we also hide the “shift” keys, i.e. the keys which get activated only when the shift button is down. I have named these rows with a div id ending “_shift”. We will bring them back into view when the user presses the shift key (we will see later).

The rest of the CSS involves basic formatting to make the keys look like as they are on a standard QWERTY keyboard.

#keyboard { 
position: absolute; 
display: none; 
border: 1px solid #ccc; 
width: 560px; 
padding: 10px; 
cursor: move; 
}
#spacebar input { 
width: 180px; 
margin: 0 auto; 
margin-left: 150px; 
}
 
#shift, #shifton { 
width: 70px; 
text-align: left; 
}
 
#row0_shift, #row1_shift, #row2_shift, #row3_shift {
display: none;
}
 
#row0, #row0_shift {
padding-left: 20px; 
}
 
#row1, #row1_shift { 
padding-left: 60px; 
}
 
#row2, #row2_shift { 
padding-left: 70px; 
}
 
#shifton { 
border-left: 3px solid #000; 
border-top: 3px solid #000; 
}

jQuery

Let’s now get to the most important part - the JavaScript that controls the behavior of the keyboard. We will be using two jQuery extensions - one to make the keyboard draggable, and the other to aid in the selection and manipulation of the password field. I have made some additions to the original fieldSelection JQuery plugin by Alex Brem to suit our additional needs. vkeyboard.js contains our custom code.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery-fieldselection.js"></script>
<script type="text/javascript" src="vkeyboard.js"></script>

In vkeyboard.js, we place all our code within jQuery’s ready function to ensure that the code runs only after the document is fully loaded.

1
2
3

$(document).ready(function(){
// all our code goes here
});

Let me just walk you through the underlying logic behind the code. We first add an “onclick” event handler which causes the keyboard to toggle (i.e. show up if hidden, hide if already shown) when the user clicks on the “Keyboard” link.

$("#showkeyboard").click(function(e) {
var height = $(’#keyboard’).height();
var width = $(’#keyboard’).width();
leftVal=e.pageX-40+"px";
topVal=e.pageY+20+"px";
$(’#keyboard’).css({left:leftVal,top:topVal}).toggle();
});

Next up, we make the keyboard draggable, so that the user can drag it and keep in anywhere on the screen such that it does not obstruct the text underneath. We do this by calling the draggable(), courtesy of the jQuery UI + draggable plugin.

1	$("#keyboard").draggable();

We need to next define a function that toggles between the default rows on the keyboard and the rows which get activated when the “Shift” key is pressed.

function onShift(e) {
var i;
if(e==1) {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).hide();
$(rowid+"_shift").show();
}
}
else {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).show();
$(rowid+"_shift").hide();
}
}
}

Lastly, we define a function that’s called whenever any of the keys on the keyboard are pressed.

This function checks if the key pressed is Backspace. If it is, then it calls the replaceSelection function from the fieldSelection plugin with an empty string as a parameter, to indicate that a backspace operation (replacing preceding character to the current cursor location by an empty string – i.e. deleting the preceding character) must be performed.

If the “Shift” key had been pressed, then the function sets the “shifton” variable to be true to indicate that the shift key has been pressed and calls onShift(1). However if the shift key has already been pressed, the function deactivates the shift rows by calling onShift(0).

If some other key had been pressed, then we simply insert the character in between the current cursor position. The replaceSelection()handles the case when some characters have already been selected by the user. In that case, the selected characters would be replaced by the character that is represented by the key pressed.

$("#keyboard input").bind("click", function(e) {
if( $(this).val() == ‘Backspace’ ) {
$(’#pwd’).replaceSelection("", true);
}
 
else if( $(this).val() == "Shift" ) {
if(shifton == false) {
onShift(1); 
shifton = true;
}
 
else {
onShift(0);
shifton = false;
} 
}
 
else {
 
$(’#pwd’).replaceSelection($(this).val(), true);
 
if(shifton == true) {
onShift(0);
shifton = false;
}
}
})

And… we are done! Check out the demo and download full source code here.

As you can see, most of the actual hard work is handled by the jQuery plugins. If you are interested in reading up more on the challenges involved with field selection and replacement using Javascript, you should check out this article on Quirksmode.

jg says:

October 22, 2008 at 5:21 am

look @ this!!!!!

omg says:

October 22, 2008 at 5:44 am

This is so useless. Every keylogger these days not only logs they keys you press but also tracks your mouse. Do your research mate. What’s the point of this keyboard?

Ivan says:

October 22, 2008 at 7:45 am

Coolest thing ever.

Jason Smarmouth says:

October 22, 2008 at 7:55 am

I think there’s definitely a use for this - keyloggers aren’t all that smart! Love the fact that it’s dragable anywhere on the screen.

October 22, 2008 at 8:14 am

@Jason Smarmouth:

Unfortunately, they are.

Kishore Nallan says:

October 22, 2008 at 9:00 am

@omg:

Yes, I am aware that there are indeed keyloggers which trace your mouse or capture your screenshots.

The point I was trying to make is that we should do our best to ensure our security. Even for the case of keyloggers capturing screenshots, one simple way to thwart or atleast lessen that line of attack is by having a user to enter a character by hovering the mouse cursor over a letter for a few seconds. (This modification is also simple to implement in the script above.)

There is no definite solution to this problem, almost like all security issues. In fact one can still argue that, we cannot still risk the chance of someone peeking over our shoulder as we type the password, regardless of whether we are using the real keyboard or the virtual one ;)

Greg says:

October 22, 2008 at 12:01 pm

This would be great for a bookmarklet so you could use it on any site you wanted. Anyone know if this is possible?

Oskar Krawczyk says:

October 22, 2008 at 2:33 pm

Backspace doesn’t work on Safari 3 mac.

lim says:

October 22, 2008 at 9:58 pm

IMO, virtual keyboard is virtually useless against ANY software keylogger since it captures any keystroke before the computer even display it to you.

I think you’ve made it clear Nallen for “No definite solution for security”.

Nevertheless, this is one of the coolest thing against hardware keylogger. Thank you for sharing with us.

October 23, 2008 at 2:25 am

@Oskar Krawczyk:
Thank you for the bug report :) I will look into that, and hopefully we will have a fix for that soon.

Fepe says:

October 23, 2008 at 6:24 am

Backspace doesn’t work either in Chrome/XP (make sense since Safari and Chrome are both based on WebKit).
It’s like pressing the left arrow. It goes back, but doesn’t erase the character.

Great job!

Umut says:

October 23, 2008 at 3:29 pm

Very nice script. It is hard to find such a free resource.

Great job.

October 23, 2008 at 11:08 pm

Bug fixed (hopefully!). Backspace should now work in all WebKit based browsers too! Thank you all for the bug reports :)

Flash Designer says:

October 28, 2008 at 8:53 pm

Really great code!
It is very useful for security reasons for online transaction.

October 31, 2008 at 8:28 am

You know, some online sites that provide maps, traffic cam views, etc have some method to block people from taking screenshots. I wonder if you could apply that same method to this so that a spying program that takes screenshots wouldn’t be able to see what buttons you’re clicking on? Is this an awesome idea? y/n?

shariff says:

November 2, 2008 at 9:30 am

it was very helpful thanks…

Nhoel says:

November 2, 2008 at 7:36 pm

Effort has been noted, nice work.

ssds says:

November 3, 2008 at 10:11 pm

dasdasdas

Khushbu Agrawal says:

November 6, 2008 at 2:57 am

Great, nice code.

fedmich says:

November 12, 2008 at 4:14 pm

Just wanna thanks and its a cool invention
maybe additional feature is to add some designs on it to make it look like a keyboard itself :)

November 12, 2008 at 4:16 pm

oh, where’s the capslock…

November 17, 2008 at 5:37 am

Thanks everyone for the compliments :)

@fedmich:
Yes, I decided to leave out the capslock to keep it simple. After all SHIFT performs the task if you need it, and for just entering a password on a textfield, I think SHIFT gets the job done.

And, secondly, I am not sure about others, but when I have to type capital characters as part of a password, I tend to use the SHIFT key rather than the caps!

Shahzad Khan says:

November 19, 2008 at 9:01 am

Great Job………..

Amit says:

November 25, 2008 at 8:25 am

Or you can use the virtual keyboard plugin provided by http://lipik.in

Matt says:

February 5, 2009 at 3:19 am

This script is very nice, but I have a strange problem with an interaction of a formfield where I type in.

Normally when I type, the textfield reacts on this after it, but using this solution it doesn’t.

I know that the cursor must be in the textfield to let it work, but it seems even with that (this solution) that the script that works with it is not activated.

How can I simulate real typing ?

February 6, 2009 at 3:50 am

Hello Matt, I am afraid I don’t quite follow you! Please email me with the details and I will try my best to help you!

WatsMyRick says:

March 11, 2009 at 9:33 am

Hey dropping by to say hi and maybe I’ll stay for a little while.

Duong Thai says:

March 11, 2009 at 10:01 am

Thank you for your virtual keyboard,

I need to implement a higher security, I will disable the textbox so that user won’t type directly to the textbox, but let the user click on the virtual keyboard (VK) icon and use VK to input characters to the textbox. So how can I do this, any suggestion will be appreciated.

This Is Rubbish says:

March 11, 2009 at 4:55 pm

THIS IS RUBBISH!

syrus69 says:

March 15, 2009 at 12:52 am

firstly nice code:)
but how do I get this keyboard to write to multiple text fields
cheers

Virtual jQuery Keyboard | sastgroup.com says:

March 16, 2009 at 1:23 pm

[...] http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard [...]

Virtual jquery keyboard says:

March 17, 2009 at 12:12 am

[...] link: http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard [...]

Raavin says:

March 27, 2009 at 12:13 am

Aside from security this would be great for web based touch screen kiosk type applications. Like has been mentioned, there are always security issues you can’t get around but seriously, if you are that paranoid just send pigeons.

For people leaving messages like ‘THIS IS RUBBISH’, try providing code that isn’t. Oh sorry, I forgot , you’re an idiot.

A Developer’s Reference For jQuery Plugins - Aldubayan.com says:

April 3, 2009 at 10:05 am

[...] Virtual Keyboard [...]

網站製作學習誌 » [Web] 連結分享 says:

April 9, 2009 at 3:01 am

[...] Creating a Virtual jQuery Keyboard [...]

120+ Javascript, Ajax, jQuery Mega Toolbox | tripwire magazine says:

April 10, 2009 at 10:44 pm

[...] Virtual Keyboard with jQuery Tutorial [...]

Joel says:

April 21, 2009 at 5:16 pm

I plan on implementing this keyboard in a touch screen oriented interface.

Thanks for the great work.

Gardentee says:

April 24, 2009 at 10:32 am

I’m the only one in this world. Can please someone join me in this life? Or maybe death…

pk says:

April 27, 2009 at 6:18 pm

its is damn cool can be used on a touch screen kiosk

John says:

June 12, 2009 at 3:26 pm

@Kishore Nallan

Key logging issues aside, I think what you have here would be a great solution for a terminal where having a physical keyboard isn’t an option (i.e. a kiosk in a public place with/without a touch screen monitor).

Using the hovering implementation that you mentioned in a previous post, this can also serve as a great accessibility tool for a user to “type” with who is physically unable to interact with a keyboard and relies on eye motion capture to use and navigate through a computer.

I definitely wouldn’t throw the baby out with the bathwater out on this one.

Jay Nanavati says:

June 18, 2009 at 2:33 pm

Hi, I have used this script to make a virtual keyboard, however I dont want to use a textbox, I want the javascript to entre the text in a div. can that be possible and if so please could you tell me how.

Thanks

Peet says:

June 18, 2009 at 4:01 pm

cool stuff Kishore.

I’m adapting the keyboard to work on a touch screen. Was wondering if anyone new a way to add a tab key that would jump fields in a form? A return key would also be handy although i’m sure i can figure that out pretty soon

Any help would be very welcome
Peet

Gaz says:

June 21, 2009 at 11:28 am

Virtual keyboards must have a good use in accessibility as well

MaxWiz says:

June 28, 2009 at 12:14 am

There I am putting together a touch screen web app that operates a video suggestions box and bingo, someone has done much of the hard work for me. This is why the net is so good. Thanks for the code!

Csaba says:

July 8, 2009 at 8:47 pm

I think it can be very useful for some people.

Design Shack - Web design showcase, CSS tutorials and web standards

Sponsors

About