rem
unit based instead of px
based so it should scale bettertype="number"
or class="keyboardInputNumbersOnly"
See the full changelog by version number.
Fork me on Github!
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 94 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 188.7kB, 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.
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 are 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 or keyboard.svg 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 should function fine in any modern browser.
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) and a Joomla module.
To see all the ways you can customise the keyboard, check out the list of configuration option variables in the "keyboard.js" file.
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
.
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.
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
.
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
.
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.
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 keyboard includes a control that allows the user to adjust the size of the keyboard.
Use the up arrow (⇑) to increase the size of the keyboard, and the down arrow (⇓) to decrease it.
Five sizes based on font-size have been pre-programmed: 0.7rem, 0.8rem (default), 0.9rem, 1rem and 1.1rem;.
To disable the appearance of this 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.
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 ISO two or three letter language codes with optional country subtag. e.g. en_GB.
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.
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 verify an input already has the keyboard attached, 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
:lang="ru"
):Input in | a <table> |
cell: |
<h3>
HeaderFree for commercial and non-commercial use under the MIT licence.
Please copy these files to your own website rather than linking to them directly.
SVG icon made from Icon Fonts is licensed by CC BY 3.0
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 achieve 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.
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!
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.
The Virtual Keyboard Interface is MIT 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!