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!
Login 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.
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.
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.
$(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.
$("#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.

Comments & Discussion
145 Comments
Pingback: Virtual jQuery Keyboard | sastgroup.com
Pingback: Virtual jquery keyboard
Pingback: A Developer’s Reference For jQuery Plugins - Aldubayan.com
Pingback: 網站製作學習誌 » [Web] 連結分享
Pingback: 120+ Javascript, Ajax, jQuery Mega Toolbox | tripwire magazine
Pingback: 50 Useful New jQuery Techniques and Tutorials « Kata learns to code
Pingback: 50 jQuery Techniques And Tutorials | oOrch Blog
Pingback: 50 Useful New jQuery Techniques and Tutorials « Smashing Magazine
Pingback: 40 Free Amazing jQuery Plugins and Tutorials With Demos | DesignBeep
Pingback: 50 Useful New jQuery Techniques and Tutorials « Gacik Design Blog
Pingback: jQuery Virtual Keyboard – For Safer Forms
Pingback: Script jQuery hữu dụng « “Ngoc Design”
Pingback: 50 Useful New jQuery Techniques and Tutorials | Theme Center
Pingback: 40 Free Amazing jQuery Plugins and Tutorials With Demos | Afif Fattouh - Web Specialist
Pingback: 5 tutoriales de JQuery
Pingback: Virtual jQuery Keyboard | jQuery Wisdom
Pingback: 45+ Really Essential Free HTML [Form] Enhancements | tripwire magazine
Pingback: Sıradışı Jquery Uygulamaları « Epic Network Code
Pingback: Virtual jQuery Keyboard
Pingback: Harika ve sıradışı jquery uygulamaları | Blog GizliKale Güncel Linkler
Pingback: Sıradışı jQuery uygulamaları « Bay Bedava – Netten Başlıklar
Pingback: 75+ Top jQuery Plugins to improve Your HTML Forms | tripwire magazine
Pingback: 10+ Useful jQuery Plugins « Nulls
Pingback: jQuery keyboard - niniku
Pingback: 3个 JavaScript ( jQuery ) 安全虚拟键盘插件 « theU0net.Blog
Pingback: jQuery keyboard | Niniku 'S Blog
Pingback: 50 Useful New jQuery Techniques and Tutorials | Top Web Hosts Review Best Web Hosting 2010
Pingback: Moduli, di tutto di più — Studio404 Web Agency
Pingback: 创造了一个基于JQuery的虚拟键盘
Pingback: 30+ Free Amazing jQuery Plugins and Tutorials | WEBAXES.COM
Pingback: 3个 JavaScript ( jQuery ) 安全虚拟键盘插件 - JavaScript - jQuery 插件 虚拟键盘 - 代码世界
Pingback: 50 Useful New jQuery Techniques and Tutorials | Xiaoqi He ( Harry He ) – Official Blog – 贺孝琦官方博客
Pingback: 50+ jQuery Plugins for Form Enhancements | tripwire magazine
Pingback: jQueryキーボード第2弾 - BlackFlag
Pingback: 50 полезных уроков по jQuery (часть 1)
Pingback: 三人行 » Jquery插件(经典)
Pingback: 40 Useful jQuery Techniques and Tutorials for Great User Interface | Free Web Design Tucson
Pingback: 40 Useful jQuery Techniques And Tutorials For Great User Interface « Perfect RS
Pingback: 40 полезных веб компонентов на Jquery
Pingback: 40 Useful jQuery Techniques And Tutorials For Great User Interface - Pinnacle Web Services Blog
Pingback: 50个有用的jQuery技巧|Narco
Pingback: » 65 jQuery Tutorials To Help You Customize Your Site
Pingback: bagel cafe » ぐりぐり動かせるデザインも素敵な、jQueryチュートリアル65選
Pingback: 16 Amazing jQuery Plugins | jQuery4u
Pingback: How To Create Virtual jQuery Keyboard | Jquery
Pingback: 50 Kỹ Thuật và Bài Học về jQuery | Thư Viện IT
Pingback: InfinityScope » jQueryでバーチャルキーボード
Pingback: 50个有用的jQuery技巧 | ajax-js – ajax实例汇总
Pingback: 50 Kỹ Thuật và Bài Học về jQuery – iTViet.Vn – Thông Tin Công Nghệ
Pingback: Tạo bàn phím ảo nhờ jQuery - Walllab.com
Pingback: 5 Virtual Keyboard jQuery Plugins