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, Belgian, Dutch, Dvorak, French, German, Greek, Hebrew, Hungarian, Italian, Lithuanian, Norwegian, Number Pad, Polish Programmers, Portuguese, Russian, Slovenian, Spanish (Spain), Turkish-F, Turkish-QWERTY, UK, 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 below).
<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 IE 6.0, Firefox 2.0.0.4, Opera 9.21 and Safari 3.0 beta for Windows.
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 "US Int'l", change the value like so: this.VKI_kt = "US Int'l";.
To turn dead keys on by default, set the value of this.VKI_deadkeysOn to true.
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.
Much thanks goes out to these fine individuals who graciously prepared and donated keyboard layouts for inclusion in the script!
| Cell 1 | Cell 2 |
| Cell 3 |
