JavaScript Graphical / Virtual Keyboard Interface
News
November 8, 2011 - v1.49
- Don't display language drop-down if only one keyboard available
September 30, 2011 - v1.48
- Fix for Firefox 6 & 7 styling issue (userscript only)
April 18, 2011 - v1.47
- Clicking focused input opens keyboard in imageless mode
- Add option to disable submitting form when pressing Enter (tommarracci)
See the full changelog by version number.
Description
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 92 keyboard layouts:
- Albanian
- Arabic
- Assamese
- Azerbaijani Cyrillic
- Azerbaijani Latin
- Belarusian
- Belgian
- Bengali
- Bosnian
- Bulgarian BDS
- Bulgarian Phonetic
- Burmese
- Canadian French
- Chinese Bopomofo IME
- Chinese Cangjie IME
- Croatian
- Czech
- Danish
- Dari
- Devanagari
- Dingbats
- Divehi
- Dutch
- Dvorak
- Eastern Armenian
- Estonian
- Faeroese
- Farsi
- Finnish
- French
- Georgian
- German
- Greek
- Gujarati
- Hebrew
- Hindi
- Hungarian
- Icelandic
- Irish / Gaelic
- Italian
- Japanese Hiragana/Katakana
- Kannada
- Kazakh
- Khmer
- Korean
- Kurdish
- Kyrgyz
- Latvian
- Lithuanian
- Macedonian Cyrillic
- Malayalam
- Maltese 48
- Marathi
- Miscellaneous Symbols
- Mongolian Cyrillic
- Norwegian
- Pashto
- Pinyin
- Polish (214)
- Polish Programmers
- Portuguese
- Portuguese (Brazil)
- Punjabi (Gurmukhi)
- Romanian
- Russian
- Serbian Cyrillic
- Serbian Latin
- Slovak
- Slovenian
- Spanish
- Swedish
- Swiss French
- Swiss German
- Syriac
- Tamil
- Tatar
- Telugu
- Thai Kedmanee
- Thai Pattachote
- Turkish F
- Turkish Q
- Ukrainian
- United Kingdom
- Urdu
- Urdu Phonetic
- US International
- US Standard
- Uzbek Cyrillic
- Vietnamese
- Western Armenian
- Yiddish
- Yiddish (Yidish Lebt)
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 164.2kB, 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.
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 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, IE8 and the latest versions of: Firefox, Opera, 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.
The script is also available as a bookmarklet (works in IE), a Joomla module and a WordPress plugin (see sidebar).
Customisation
- Default keyboard layout
-
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";
. - Dead keys
-
To turn dead keys on by default, set the value of
this.VKI_deadkeysOn
totrue
. You can also hide the dead keys checkbox entirely by settingthis.VKI_deadBox
tofalse
. This means the keyboard will be stuck in the dead keys mode which you selected as the default, either on or off. - Number pad
-
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
totrue
. To hide the number pad button, setthis.VKI_numberPad
tofalse
. A value offalse
means the keyboard will be stuck in whatever display mode you selected usingthis.VKI_numberPadOn
. - Clear passwords
-
To have the keyboard automatically clear password inputs when it is invoked, set the value of
this.VKI_clearPasswords
totrue
. 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. - Hide version number
-
To disable display of the version number in the bottom right hand corner, set the value of
this.VKI_showVersion
tofalse
. - Imageless mode
-
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. - Clickless interface
-
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 thethis.VKI_clickless
variable is the amount of hover time (in milliseconds) required to activate a key. (1000 milliseconds = 1 second) - Keyboard size control
-
The keyboard includes a control that allows the user to adjust the size of the keyboard. Five sizes based on font-size have been pre-programmed: 9px, 11px (default), 13px, 16px and 20px; corresponding to the sizes 1 to 5 respectively. To disable the appearance of this dropdown control, set the value of
this.VKI_sizeAdj
to false. The value ofthis.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. - Automatic layout selection
-
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 attributelang="fr"
then the French keyboard layout will be automatically selected by default when the keyboard is invoked. If nolang
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 ofthis.VKI_langAdapt
to false.The script uses valid two letter language codes with optional subtags, as defined in RFC 1766. 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.
Advanced Stuff
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(); }
Keyboard Layout Credits
Much thanks goes out to these fine individuals who graciously prepared and donated keyboard layouts for inclusion in the script!
- Yiddish (Yidish Lebt) keyboard layout by Simche Taub (jidysz.net)
- Urdu Phonetic keyboard layout by Khalid Malik
- Yiddish keyboard layout by Helmut Wollmersdorfer
- Khmer keyboard layout by Sovann Heng (km-kh.com)
- Dari keyboard layout by Saif Fazel
- Kurdish keyboard layout by Ara Qadir
- Assamese keyboard layout by Kanchan Gogoi
- Bulgarian BDS keyboard layout by Milen Georgiev
- Basic Japanese Hiragana/Katakana keyboard layout by Damjan
- Ukrainian keyboard layout by Dmitry Nikitin
- Macedonian keyboard layout by Damjan Dimitrioski
- Pashto keyboard layout by Ahmad Wali Achakzai (qamosona.com)
- Armenian Eastern and Western keyboard layouts by Hayastan Project (www.hayastan.co.uk)
- Pinyin keyboard layout from a collaboration with Lou Winklemann
- Kazakh keyboard layout by Alex Madyankin
- Danish keyboard layout by Verner Kjærsgaard
- Slovak keyboard layout by Daniel Lara (www.learningslovak.com)
- Belarusian and Serbian Cyrillic keyboard layouts by Evgeniy Titov
- Bulgarian Phonetic keyboard layout by Samuil Gospodinov
- Swedish keyboard layout by Håkan Sandberg
- Romanian keyboard layout by Aurel
- Farsi (Persian) keyboard layout by Kaveh Bakhtiyari (www.bakhtiyari.com)
- Burmese keyboard layout by Cetanapa
- Bosnian/Croatian/Serbian Latin/Slovenian keyboard layout by Miran Zeljko
- Hungarian keyboard layout by Antal Sall 'Hiromacu'
- Arabic keyboard layout by Srinivas Reddy
- Italian and Spanish (Spain) keyboard layouts by dictionarist.com
- Lithuanian and Russian keyboard layouts by Ramunas
- German keyboard layout by QuHno
- French keyboard layout by Hidden Evil
- Polish Programmers layout by moose
- Turkish keyboard layouts by offcu
- Dutch and US Int'l keyboard layouts by jerone
Sample Form Elements
in fixed position containers:
Click the button below to close
the keyboard via
VKI_close
:Read-only
lang="ru"
):
In a scrollable area (scroll down)
In a scrollable area (scroll up)
Should not have an interface:
Cell 1 | Cell 2 |
Cell 3 |
Read-only Password:
Header
Download
Free for commercial and non-commercial use under the BSD licence.
Please copy these files to your own website rather than linking to them directly.
Greasemonkey Userscript, Opera UserJS & Chrome Extension
Opera, Chrome and 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 acheive 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.
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.
Bookmarklet
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!
Joomla Module
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.
WordPress Plugin
PHPaid.org developer Gerrad turned the Virtual Keyboard Interface into a WordPress module. You can download it from the PHPaid.org website.
I use WordPress on a couple other sites so I might actually end up using this script! Much thanks, Gerrad!
Who Uses It?
The Virtual Keyboard Interface is BSD 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!