Purpose

The on-screen keyboard is designed to prevent malware on users' computers from obtaining passwords by logging keystrokes.  It also has a position randomizer that can be seen by clicking the "Log-in" tab above, that's designed to prevent screen-capture and mouse-position malware from mapping specific cursor positions to certain characters of the on-screen keyboard.

Usage

The on-screen keyboard is implemented by inserting 'class="keyboardInput"' ( without the single quote marks ) into the target page element to be enabled with onscreen keyboard data entry, and loading the files 'keyboard.css', 'keyboard.js', and 'keyboare.js' into the appropriate locations to be accessed from the page.  Small thumbnail images of a keyboard are automatically inserted close to each of the enabled elements, and clicking on a thumbnail image shows the on-screen keyboard associated with the page element.

Plain-text input, password, and textarea elements, can be used with the same setup technique, and a number of default settings are available.  These include whether the text inserted into the page element is read-only or read-write, which is set with the element property 'readonly="readonly"', or nothing at all.  And, as read-only prevents normal key entry to a page element, it should be turned on for maximum security on password page elements, so that the on-screen keyboard must be used.

The 'mouseover' text entry function is enabled by setting the 'VKI_clickless' variable, near the top of the 'keyboard.js' file, to a non-zero value.  For example, setting this.VKI_clickless=1000; sets the delay to 1000 milliseconds ( ms ) before a character is inserted into the page element automatically after the mouseover event occurs for a key.  And this can be speeded up or slowed down in the range 500 ms - 5000 ms with the two horizontal arrow keys in the upper right area of the onscreen keyboard, that are shown on the keyboard after the thumbnail image has been clicked.  The keyboard "click" function remains active when clickless entry is enabled, but shouldn't be used if maximum security is to be achieved.

The on-screen keyboard size can also be increased or decreased, with the up and down vertical arrow keys in the same area.  And the contents of password fields can be cleared by default when a page element is focused on, by setting the 'this.VKI_clearPasswords=true' variable ( but this is set to 'false' by default here ).  A more extensive explanation of available settings and usage can be seen at author Brian Huisman's GreyWyvern site at http://www.greywyvern.com/code/javascript/keyboard.

Text             Text, read-only

Password     Password, read-only

Max-Length of 5 characters:

  In a scrollable <div> element

 











 

In a <textarea> element.

rtl input: