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 below).
- Code: Select all
<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:
- Code: Select all
<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.
