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!

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.

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.

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.

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.

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.

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.

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.