View on GitHub

Multilingual Virtual Keyboard for Joomla

This is a Joomla module for multilingual virtual keyboard functionality in input fields and textareas.

The keyboard is based on the JavaScript Graphical / Virtual Keyboard Interface (VKI) by GreyWyvern, see also an updated version of the VKI.

Supported keymaps

Albanian, Amharic (=Tigrinya), Arabic, Armenian (Eastern/Western), Assamese, Azerbaijani (Cyrillic / Latin), Belarusian, Belgian, Bengali, Bulgarian (+Phonetic), Burmese, Chinese (Bopomofo / Cangjie / Pinyin), Crimean Tatar, Czech, Danish, Dari, Devanagari, Divehi, Dingbats, Dvorak, Dutch, English (International / GB / US), Estonian, Faeroese, Farsi, Finnish, French (Canada / France / Switzerland), Georgian, German (Germany / Switzerland), Glagolitic, Greek, Gujarati, Hebrew, Hindi, Icelandic, Irish / Gaelic, Italian, Japanese (Hiragana / Katakana), Kannada, Kazakh (Cyrillic), Khmer, Korean, Kurdish, Kyrgyz, Latvian, Lithuanian, Hungarian, Macedonian, Malayalam, Maltese, Marathi, Misc. Symbols, Mongolian (Cyrillic), Norwegian, Old Cyrillic / Church Slavonic, Pashto, Polish (+Programmers), Portuguese (Brazil / Portugal), Punjabi (Gurmukhi), Romanian, Russian, Serbocroatian (Latin = Bosnian/Croatian/Serbian & Slovenian), Serbian (Cyrillic), Slovak, Spanish, Swedish, Swiss (French / German), Syriac, Tamil, Tatar (Cyrillic), Telugu, Thai (Kedmanee / Pattachote), Turkish (F/Q), Turkmen, Ukrainian, Urdu (+Phonetic), Uzbek, Vietnamese, Yiddish (+Yidish Lebt)

The keyboard is fully customisable in the backend. Without any coding you can adjust the basic keyboard settings as: adjust keyboard size, allow user to resize, show number pad, set dead keys on by default, submit forms when Enter is pressed, set keyboard image, use imageless mode, use clickless mode, display only the keyboards you need, define default keyboard. Additionally, you make the keyboard responsive for touch screens (experimental, might not work with your template). As an advanced option, you can define a custom keyboard layout.

Download

Joomla 3.x and 4.x: mod_virtual_keyboard.zip (Version 2.1)

Joomla 1.5: mod_virtual_keyboard.zip (Version 1.0)

The module is listed in the Joomla! Extensions Directory.

There is also a bookmarklet.

Installation

After installation disable the module title, enable the module and assign it to a bottom position of your template. This is necessary because the keyboard script has to load in the end. Position it in the where it doesn't produce any styling, for example in the footer. It must be in a position which is defined by your template. If there are problems with the template, try a different position. Ensure that the menu assignment is set to On all pages

Configuration

Most options are self-explanatory or have a tooltip. Here some additional remarks:

General settings (module pane)

Apply keyboard to: You apply the virtual keyboard to all input fields and textareas at once ("all") or to one or more specific input fields/textareas by indicating a corresponding class name. If you need the keyboard for fields with different classes, create a new module of the keyboard in the modules mananger and define the according class there.

Custom font: Define a custom font for the keyboard and the corresponding input field(s)/textarea(s). Blank input will use the default settings. Put the font on some place in your Joomla installation and point to it (e.g. /media/fonts/font.ttf). This option has been tested so far with TTF fonts. Before using a font, please check its license restrictions first.

Responsive keyboard (Experimental): This will enable a responsive layout on mobile devices. It will suppress the domestic keyboard and show the virtual keyboard instead. This option still causes problems with some templates, see "Known issues" below.

Adjust button names, tooltips and meta keys

You can adjust all keys, tooltips and language names to your needs manually. You might change these to your needs, especially if you have a web site other than in English.

Keyboard settings pane

When turning the advanced options on, you will be able to change the keyboards' titles and tooltips. This is useful in cases where several languages share the same keyboard layout and you want to change the name for your needs accordingly (e.g. Serbocroatian is also used by Bosnian/Croatian/Serbian & Slovenian and Tigrinya also uses Amharic).

Localise the keyboard

  • Adjust button names, tooltips and meta keys in the General settings (module pane)
  • Change keyboard titles and tooltips (keyboard pane)
  • Create several virtual keyboard modules and assign them to each of your site languages

Note

All keyboards (except Amharic and Custom) are active by default. Consider turning off keyboards you don't need in order to save loading time.

The Amharic keyboard needs dead keys active by default. Amharic overrides the dead key settings so if Amharic is enabled, you won't be able turn dead keys off on the General settings.

The Glagolitic keyboard shows the characters' Cyrillic equivalents on "Alt" which is ment to be merely informational. The full set of Cyrillic characters is provided in the Old Cyrillic / Church Slavonic keyboard which is based on the Russian pre-revolutionary typewriter, extended with the other Old Cyrillic characters. The latter are available with AltGr. You might consider using a Medieval font. See above how to do this and check out this link collection.

Custom keyboard (Advanced)

It is possible to define a keyboard and additional dead keys according to own needs. Be aware that errors in you code might break the virtual keyboard. In such case, simply save a blank field, so the initial values will be restored.

Lay out each keyboard in rows of sub-arrays. Each sub-array represents one key. Each sub-array consists of four slots described as follows:
example: ["a", "A", "\u00e1", "\u00c1"]
a - Normal character
A - Character + Shift/Caps
\u00e1 - Character + Alt/AltGr/AltLk
\u00c1 - Character + Shift/Caps + Alt/AltGr/AltLk

You may include sub-arrays which are fewer than four slots. In these cases, the missing slots will be blanked when the corresponding modifier key (Shift or AltGr) is pressed.

If the second slot of a sub-array matches one of the following strings:
Tab, Caps, Shift, Enter, Bksp, Alt OR AltGr, AltLk
then the function of the key will be the following, respectively:

  • Insert a tab
  • Toggle Caps Lock (technically a Shift Lock)
  • Next entered character will be the shifted character
  • Insert a newline (textarea), or close the keyboard
  • Delete the previous character
  • Next entered character will be the alternate character
  • Toggle Alt/AltGr Lock

The first slot of this sub-array will be the text to display on the corresponding key.

Layout dead keys (diacritic + letter) should be added as property/value pairs of objects with hash keys equal to the diacritic. See the this.VKI_deadkey object. In each property/value pair, the value is what the diacritic would change the property name to.

Known issues

  • In some cases the activation of this module causes problems with the display of the site. The solution is to choose a different position
  • The responsive keyboard option will only work with some Joomla templates. There are still issues with the JQuery and the Modernizr library. See the issue on Github

Support

Exclusively as issues on the project page on Github.


Back to top