Fullscreen Virtual Keyboard Plugin For jQuery - MOK

File Size: 626 KB
Views Total: 7182
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fullscreen Virtual Keyboard Plugin For jQuery - MOK

MOK(Multilingual Onscreen Keyboard) is a jQuery plugin for creating a fullscreen virtual keyboard that will popup when a specified text field is focused. Supports multiple languages, Microsoft Keyboard Layout Creator and comes with a lot of customization options. Mobile/Touch support is coming soon.

Supported Keyboard layouts:

  • Albanian
  • Arabic
  • Azeri-Cyrillic
  • Azeri-Latin
  • Bashkir
  • Belarusian
  • Belgian
  • Bengali
  • Bosnian
  • Bulgarian
  • Croatian
  • Czech-Programmer
  • Czech
  • Danish
  • Dutch
  • Estonian
  • Faeroese
  • Finnish-Sami
  • Finnish
  • French
  • Gaelic
  • Georgian
  • German
  • Greek
  • Greenlandic
  • Gujarati
  • Hausa
  • Hebrew
  • Hindi
  • Hungarian
  • Icelandic
  • Igbo
  • Irish
  • Italian
  • Japanese-Latin
  • Kannada
  • Kazakh
  • Khmer
  • Korean-Latin
  • Kyrgyz
  • Languages
  • Lao
  • Latvian
  • Lithuanian
  • Macedonian
  • Malayalam
  • Maltese
  • Maori
  • Marathi
  • Mongolian
  • Nepali
  • Norwegian
  • Oriya
  • Pashto
  • Persian
  • Polish
  • Portguese-Brazil
  • Portguese
  • Punjabi
  • Romanian
  • Russian
  • Serbian
  • Sesotho-Sa-Leboa
  • Setswana
  • Sinhala
  • Slovak
  • Slovenian
  • Sorbian
  • Spanish
  • Swedish
  • Swiss-French
  • Swiss-German
  • Syriac
  • Tajik
  • Tamil
  • Tatar
  • Telugu
  • Thai-Kedmanee
  • Thai-Pattachote
  • Tibetan
  • Turkish-F
  • Turkish-Q
  • Turkmen
  • Uk
  • Ukranian
  • Urdu
  • US-Dvorak
  • US
  • Uyghur
  • Uzbek
  • Vietnamese
  • Wolof
  • Yakut
  • Yoruba

Basic usage:

1. Include jQuery JavaScript library together with the Multilingual Onscreen Keyboard plugin's files on the webpage.

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="dist/keyboard.js"></script>
<link rel="stylesheet" href="dist/keyboard.css">

2. Don't forget to upload the language files (.klc file created by Microsoft Keyboard Layout Creator) of your choice to the web server.

/languages/albanian.klc
/languages/arabic.klc
...

3. Initialize the plugin to activate the virtual keyboard on all the text fields and editable elements within the document.

$(document).keyboard();

4. Initialize the plugin to activate the virtual keyboard on all the text fields and editable elements within the document.

$(document).keyboard({

  // default entry fields
  inputType: 'text, textarea, number, password, search, tel, url, contenteditable', 

  // 'us, spanish, arabic, russian'
  language: none,

  // 'top', 'middle', or 'bottom'
  keyboardPosition: 'bottom', 

  // background color of cancel button
  cancelColor: '#E74C3C', 

  // text color of cancel button
  cancelTextColor: '#FFFFFF', 

  // background color of accept button
  acceptColor: '#2ECC71',

  // text color of accept button
  acceptTextColor: '#FFFFFF',

  // background color of keys
  keyColor: '#E0E0E0', 

  // text color used on keys
  keyTextColor: '#555555',

  // color and opacity of blackout background
  blackoutColor: '25, 25, 25, 0.9',

  // cancel keyboard input with hardware keyboard [Escape] key.
  allowEscapeCancel: true,  

  // accept keyboard input with hardware keyboard [Enter] key.
  allowEnterAccept: true
  
});

5. Callbacks available.

$(document).keyboard({

  // action of [Enter] key
  enterKey: null,

  // action of [Tab] key
  tabKey: null,

  // action of [Ctrl] key
  ctrlKey: null,

  // action of [Alt] key
  altKey: null,

  // action of [Spare] key
  spareKey: null,

  // action of [Language] key
  languageKey: null

});

Change log:

2018-02-24

  • v1.1.1

2017-06-29

  • Inputs of type number are now passed as type of tel.

This awesome jQuery plugin is developed by srm985. For more Advanced Usages, please check the demo page or visit the official website.