See the full changelog by version number.
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 Arabic, Armenian East/West, Belarusian, Belgian, Bengali, Bulgarian Phonetic, Burmese, Czech, Danish, Dutch, Dvorak, Farsi (Persian), French, German, Greek, Hebrew, Hindi, Hungarian, Italian, Kazakh, Lithuanian, Macedonian, Norwegian, Number Pad, Pashto, Pinyin, Polish Programmers, Portuguese, Romanian, Russian, Serbian Cyrillic, Serbian Latin, Slovak, Slovenian, Spanish (Spain), Swedish, Turkish-F, Turkish-QWERTY, UK, Ukrainian, US Standard and US International keyboard layouts, dynamically selectable. Plus it's easy to add other layouts!
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, Firefox 3.x, Opera 9.6x, 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.
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";.
To turn dead keys on by default, set the value of this.VKI_deadkeysOn to true.
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.
To disable display of the version number in the bottom right hand corner, set the value of this.VKI_showVersion to false.
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)
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();
}
Much thanks goes out to these fine individuals who graciously prepared and donated keyboard layouts for inclusion in the script!
VKI_close:| Cell 1 | Cell 2 |
| Cell 3 |
Free for commercial and non-commercial use under the BSD licence.
Opera and Greasemonkey users can download and install a user JavaScript to automatically add this keyboard interface to all applicable form elements on all websites.
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 and UserScripts.org.
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.
Copyright © 2009 Brian Huisman AKA GreyWyvern
