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

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.

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.

BlueHornet says:

July 17, 2009 at 11:56 pm

What’s up, is there anybody else here?
If there’s anyone else here, let me know.
Oh, and yes I’m a real person LOL.

Later,

Alaa Al-Hussein says:

August 5, 2009 at 7:51 am

Nice work and very good idea.

I have created a key watcher (to catch keyboard events) on my blog

check it on:
http://blog.freelancer-id.com/index.php/2009/08/03/catch-keyboard-events-in-jquery

Steve Fenton says:

August 25, 2009 at 8:28 am

Although the keyboard may not entirely defeat key logging I can see a use for it – and this is a great example.

These days, to really beat key logging, you need to have encrypted and randomly ordered key pads (i.e. all the HTML handles change, the output of the number 1 is different each time and the keys appear in a different order each time). This is why banks use the much simpler three-random-digits from your password.

Canobi says:

August 27, 2009 at 3:16 pm

Nice job Kishore. Just have a few suggestions.

1. Could you provide a ‘finish’ button. I can see that clicking ‘keyboard’ again toggles the keyboard to hide, but it would be more intuitive adding a button that does this.

2. Is it possible to prevent keyboard input into the text box that has this keyboard linked to it. This would be useful for online banking logins.

3. It would be nice if it was possible to have a keyboard only mode: crazy right? Let me explain.
a. When you click the keyboard link and it displays the keyboard, the mouse cursor is hidden.
b. in place of the mouse, the keys are highlighted and the user uses the arrow keys to move from key to key
c. When the user selects the key (using spacebar or enter), instead of placing the input into the textbox, you capture the input and over the next 2 secs sequentially highlight 4 keys in close proximity to the pressed key. Also, within this 2 secs, insert the input into the textbox (so it looks like the user entered one of the other keys, not the one they actually pressed)
d. Ensure that you do not return to the key that was pressed initially. So it seems as if the user is moving from key to key and it would be virtually impossible to spot what key was pressed visually. This would defeat all keyloggers (if this could be done).
e. The above can be done using the mouse as well but the cursor must be hidden. Also, for added security, you can randomize the keyboard i.e. the keys, instead of displaying a QWERTY format all the time.

For those with keylogging issues, get your facts right. This script virtually eliminates all hardware keylogging,…,Period. For those that have their own PC, they wouldnt need to worry about hardware keyloggers anyway. For those at an internet cafe, entering your password with this script will protect you from hardware keyloggers.

For software keyloggers, the only way these keyloggers will work here is if someone has direct intent on the target system and is monitoring the system via remote control e.g. realvnc. The majority of software keyloggers will attempt to send out keylogs via email. What password are they going to send when I enter my password with this keyboard script. Also, Norton 360 and most other good software will reduce this activity, even if someone has been stupid enough to install the software they got in their email that had the keylog app attached.

Cyril says:

October 10, 2009 at 11:38 am

I want to use your source to create a keyboard with special
characters to type a foreign language. For that I need to use a special true type. i also need to add “copy” and ” clear” keys
Any easy explanation on how I can change the source?

شركات الاستضافة العراقية says:

October 19, 2009 at 3:46 pm

Thank you very much, very nice keyboard

dini says:

October 23, 2009 at 12:19 pm

thank you very much ,very nice keyboard but i have to create a virtual keyboard for malayalam language

October 25, 2009 at 5:49 pm

@all: thanks for all the comments and suggestions! If you have any specific questions on how to do something with the virtual keyboard, please email me directly and I will try my best to answer you. You can find my email address in the source files, or through my blog.

gwescotto says:

November 10, 2009 at 8:30 pm

Hi All,

Been hanging around for a little while and thought I would jump in and register (finally).

Anyway, I hope to contribute and learn a thing or two while I’m here.

Have a Happy Thanksgiving All :D

mike says:

November 17, 2009 at 12:15 am

2 questions,
1.) how can I change the name and id of the textfield

2.) Can we have a onfocus on the text input so it comes up automatically when the textfield is selected.

arun says:

December 18, 2009 at 8:03 am

hi nice one

i need one query how to use this in both text box ?

Vik says:

December 25, 2009 at 12:06 pm

Thank you very much ,very nice keyboard but i have to create a virtual numeric keyboard with random numbers

Mr. LirGype says:

December 26, 2009 at 10:51 pm

Abide in animadvesrsion or elsewhere?

abdul aziz says:

December 31, 2009 at 4:24 am

thank you very muchhhhhhhhhhhhhh

December 31, 2009 at 4:28 am

apka bahut bahut shukriya

melissab says:

January 7, 2010 at 2:46 pm

Just wanted to sign in after joining and give a quick hello to everyone on the forum . Look forward to following the conversations here!

http://www.seniorpsychiatry.com

Ryan Webb says:

January 14, 2010 at 7:05 am

Secure against key loggers but not so secure for other people peeping on your screen especially the speed of mouse clicks you do when typing a password. I have seen on other secured sites that their version of virtual keyboard are randomized so, keys are not in their proper position…peeping won’t help.

Overall this is great for learning. Cheers!

Vichan says:

February 20, 2010 at 2:37 pm

That great !!!

Ren says:

March 1, 2010 at 8:06 pm

For those who’ve left utterly useless comments about how useless this plug-in is: you’re a bunch of unimaginative twits who obviously can’t “think outside the box”. You would do well to heed the advice that a total stranger gave me when I was 10 – if you can’t say something constructive, then STFU (Shut The FSCK Up!)
This plug-in could be very useful for allowing quick-and-easy entry of special characters such as unicode Greek, Germanic, and Latin characters.

Espen says:

March 10, 2010 at 3:48 pm

Was going to go all the way about how useful something like this is on a touch screen, but everyone else beat me to it.

Thanks for spending your time on stuff like this :)

AbreuBusiness says:

March 17, 2010 at 3:24 am

Gostei, codigo facil de mexer e fica muito bom, quem quiser da uma olhada clicando no link http://www.abreubusiness.com.br/agendabusiness/web/..
valeu – abcs [s]

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

About