JavaScript Graphical / Virtual Keyboard Interface

News

November 8, 2011 - v1.49

September 30, 2011 - v1.48

April 18, 2011 - v1.47

See the full changelog by version number.

Description

This script is a reusable system for adding a graphical keyboard interface to text fields, password fields and textareas so they can be filled with mouse only. It also adds easy access to special characters your existing keyboard may not otherwise have the ability to generate. Comes with the following 92 keyboard layouts:

All keyboard layouts are dynamically selectable, plus it's easy to add other layouts! Note: Some keyboard layouts may not be rendered properly until the appropriate Unicode fonts are installed on your computer. This doesn't affect your ability to use the other layouts.

Compared to other javascript virtual keyboards, this main benefit of this script is that it is extremely size-efficient. Including all available keyboard layouts, the script, CSS and single keyboard image is only 164.2kB, ensuring that it won't become a drain on your server. It's also easy to remove unused keyboard layouts to make the script even smaller.

Installation

To activate this script within an HTML document: First include the external JavaScript file, "keyboard.js" and stylesheet, "keyboard.css" within the document's <head> element (download links to the right). 

<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">

Then, to enable a graphical keyboard interface on any particular text field or textarea, simply apply to it the keyboardInput class, like so: 

<input type="text" value="" class="keyboardInput">

Then, when your document loads, the script will find all elements labeled with this class and automatically insert the keyboard link. Make sure that the keyboard.png image is in the right location for it to be loaded by the script! If JavaScript is disabled, the keyboard icons simply do not appear, so the script degrades gracefully. You may safely remove the keyboardInput class via scripting after the document has loaded.

This script has been tested to work in IE6, IE7, IE8 and the latest versions of: Firefox, Opera, Safari for Windows and Chrome. There is a known limitation in the Firefox browser where if you have an input within a position:fixed; container with a percentage (%) width, the script will replace this with an absolute (px) value; ergo screen resizes will no longer vary the width of the container. The dynamic keyboard positioning for each text field probably means this script will not work properly on pages triggering quirks mode in any browser... but maybe it will work.

The script is also available as a bookmarklet (works in IE), a Joomla module and a WordPress plugin (see sidebar).

Customisation

Default keyboard layout

To change the default keyboard which displays first for each different page, change the value of the this.VKI_kt variable to the name of the keyboard. For example, to make the default keyboard "Greek", change the value like so: this.VKI_kt = "Greek";.

Dead keys

To turn dead keys on by default, set the value of this.VKI_deadkeysOn to true. You can also hide the dead keys checkbox entirely by setting this.VKI_deadBox to false. This means the keyboard will be stuck in the dead keys mode which you selected as the default, either on or off.

Number pad

The number pad options are similar to those of the dead keys. To display the number pad by default when the keyboard is first opened, set the value of this.VKI_numberPadOn to true. To hide the number pad button, set this.VKI_numberPad to false. A value of false means the keyboard will be stuck in whatever display mode you selected using this.VKI_numberPadOn.

Clear passwords

To have the keyboard automatically clear password inputs when it is invoked, set the value of this.VKI_clearPasswords to true. This is mainly useful when there are characters already in the field; since users don't know what they are, it's likely they would like to start their input over.

Hide version number

To disable display of the version number in the bottom right hand corner, set the value of this.VKI_showVersion to false.

Imageless mode

By default the script will add a clickable image next to inputs and textareas that have the keyboard interface enabled. The script supports a secondary mode that does not insert an image, but rather brings up the keyboard when the input is focused, whether by tabbing or clicking. To enable this mode, just set the value of this.VKI_imageURI to the empty string (""). This mode is useful if, for example, you don't want the keyboard icons to mess up a tightly designed page layout.

Clickless interface

To enable the clickless interface option, set the value of this.VKI_clickless to an integer greater than 0. This interface mode allows you to enter characters simply by hovering the mouse over them for a short time, which can provide an extra layer of protection from sophisticated spyware which may take screenshots on mouse-click. The value of the this.VKI_clickless variable is the amount of hover time (in milliseconds) required to activate a key. (1000 milliseconds = 1 second)

Keyboard size control

The keyboard includes a control that allows the user to adjust the size of the keyboard. Five sizes based on font-size have been pre-programmed: 9px, 11px (default), 13px, 16px and 20px; corresponding to the sizes 1 to 5 respectively. To disable the appearance of this dropdown control, set the value of this.VKI_sizeAdj to false. The value of this.VKI_size is the default size to be used by the keyboard when it first appears on a page.

To change the size of the keyboard to values other than those listed above, just change the font size in the #keyboardInputMaster * { ... } rules in the associated CSS.

Automatic layout selection

By default, the keyboard will use the lang attribute of each enabled form element in order to determine which keyboard to display. For example, if a text input contains the attribute lang="fr" then the French keyboard layout will be automatically selected by default when the keyboard is invoked. If no lang attribute exists, or a compatible keyboard layout is not found, then the default or currently selected layout will be displayed. To disable this behaviour, set the value of this.VKI_langAdapt to false.

The script uses valid two letter language codes with optional subtags, as defined in RFC 1766. You can find out which codes will trigger particular keyboards by examining the .lang property of each keyboard layout as defined in the source code.

Advanced Stuff

The script exposes the event attachment function to scripting via the global VKI_attach function. If your document creates inputs after the page has loaded, whether through Ajax processes or user interaction, you can attach the keyboard events to them by passing the element to VKI_attach. For example: 

var foo = document.createElement('input');
document.body.appendChild(foo);
VKI_attach(foo);

You can only attach keyboard events to elements which have already been added to the document. Once the script has attached the keyboard events to an input or textarea element, it will set the element's .VKI_attached property to true. You can check for this property in your scripts to prevent applying the events to an input element which already has them, like so: 

var myInput = document.getElementById('myInput');
if (!myInput.VKI_attached) VKI_attach(myInput);

The script also exposes the keyboard close function via the global VKI_close function. Other scripts on your pages may call this function to close the keyboard if, for example, an element which contains activated keyboard inputs is hidden by the user. 

function closeDialogue() {
  document.getElementById('myDialogue').style.display = "none";
  VKI_close();
}

Keyboard Layout Credits

Much thanks goes out to these fine individuals who graciously prepared and donated keyboard layouts for inclusion in the script!

Sample Form Elements

Even works on text fields
in fixed position containers:


Click the button below to close
the keyboard via VKI_close:












Read-only







Russian input (lang="ru"):








In a scrollable area (scroll down)























In a scrollable area (scroll up)
 














Should not have an interface:






Max-Length of 5 characters:














rtl input:







Cell 1 Cell 2
Cell 3







Password:

Read-only Password:







Header








Should not have an interface:

Download

Free for commercial and non-commercial use under the BSD licence.

Please copy these files to your own website rather than linking to them directly.

Greasemonkey Userscript, Opera UserJS & Chrome Extension

Opera, Chrome and Greasemonkey (Firefox) users can download and install a user JavaScript to automatically add this keyboard interface to all applicable form elements on all websites. The same script file will work for all of these browsers. Internet Explorer users can use Antonio Rinaldi's bookmarklet version below to acheive a similar effect.

Once installed, just double-click on any text, password or textarea type form element to display the virtual keyboard! See screenshots of the Opera UserJS in action on: Yahoo!, Opera Community, Google, UserScripts.org and Twitter.

To help you create keyboard layouts from layout pages at the Microsoft Developers Network, you can also install my interpreter user JavaScript to do most of the grunt work for you.

Bookmarklet

For those who don't want to fuss with Greasemonkey or user JavaScripts (eg. Internet Explorer users), Antonio Rinaldi has implemented the Virtual Keyboard Interface as a browser bookmarklet. Go to his blog post and just drag the bookmarklet link into your browser chrome. Then when you are visiting a site on which you want to use the keyboard, click the bookmarklet and the keyboard will be attached to all available inputs on the page.

Note: If you enjoy the bookmarklet, please make sure you download the .js and .css files it uses (linked from Antonio's blog post) to your own webspace, so you don't overload his server. This is a really swell alternative implementation, and I wish I'd thought of it first. Thanks so much, Antonio!

Joomla Module

Martin Podolak was kind enough to turn the Virtual Keyboard Interface into a Joomla module. You can download it from his website: Podolak.net.

Thanks a ton, Martin! You are definitely in the awesome column in my book.

WordPress Plugin

PHPaid.org developer Gerrad turned the Virtual Keyboard Interface into a WordPress module. You can download it from the PHPaid.org website.

I use WordPress on a couple other sites so I might actually end up using this script! Much thanks, Gerrad!

Who Uses It?

The Virtual Keyboard Interface is BSD licenced for both commercial and non-commercial use. That means you can include it in any of your projects, even those you are selling, as long as my licence is included along with your documentation.

Some fantastic projects around the web are using the Virtual Keyboard Interface!

Does your project use the VKI? Tell me about it!