Multi-language Themeable Virtual Keyboard/Numpad – KioskBoard

Category: Javascript | April 22, 2021
Author: furcan
Views Total: 81 views
Official Page: Go to website
Last Update: April 22, 2021
License: MIT


Multi-language Themeable Virtual Keyboard/Numpad  – KioskBoard


KioskBoard is a JavaScript plugin to create multi-language virtual keyboards and Numpads for text fields and content editable elements.


  • Custom keys.
  • Supports special characters.
  • 5 built-in themes: light, dark, flat, material, and oldschool.
  • Allows you to create your own language profile using JSON.
  • Configurable CSS animations.

How to use it:

1. Install & download the KioskBoard package.

# Yarn
$ yarn add kioskboard

$ npm install kioskboard --save

2. Load the minified version of the KioskBoard library in the document.

<link href="dist/kioskboard.css" rel="stylesheet">
<script src="dist/kioskboard.js"></script>
<!-- OR ALL-IN-ONE JS-->
<script src="dist/kioskboard.aio.js"></script>

3. Create a new virtual keyboard instance and specify the path to the language file. Supported languages:

  • kioskboard-keys-english.json
  • kioskboard-keys-french.json
  • kioskboard-keys-german.json
  • kioskboard-keys-hungarian.json
  • kioskboard-keys-spanish.json
  • kioskboard-keys-turkish.json
  keysJsonUrl: 'kioskboard-keys-english.json'

4. Attach the virtual keyboard to a text field and done.

<textarea class="virtual-keyboard"></textarea>
KioskBoard.Run('.virtual-keyboard', OPTIONS);

5. Customize the keyboard type & enable/disable special characters using the following HTML data attributes:

  • data-kioskboard-type: “all”, “keyboard”, or “numpad”
  • data-kioskboard-specialcharacters: true = enable special characters.
<textarea class="virtual-keyboard" 

6. Customize the virtual keyboard.


  /* custom keys here. e.g.
  var myKeyboard = [
          "0": "Q",
          "1": "W",
          "2": "E",
          "3": "R",
          "4": "T",
          "5": "Y",
          "6": "U",
          "7": "I",
          "8": "O",
          "9": "P",
          "10": "Ğ",
          "11": "Ü"
          "0": "A",
          "1": "S",
          "2": "D",
          "3": "F",
          "4": "G",
          "5": "H",
          "6": "J",
          "7": "K",
          "8": "L",
          "9": "Ş",
          "10": "İ",
          "0": "Z",
          "1": "X",
          "2": "C",
          "3": "V",
          "4": "B",
          "5": "N",
          "6": "M",
          "7": "Ö",
          "8": "Ç"
  keysArrayOfObjects: null,

  // path to the predefined keys
  keysJsonUrl: null,

  // used to override default special characters
  specialCharactersObject: null,

  // language
  language: 'en',

  // "light" || "dark" || "flat" || "material" || "oldschool"
  theme: 'light', 

  // makes Caps Lock active
  capsLockActive: true,

  // allows real keyboard
  allowRealKeyboard: false,

  // enables CSS animations
  cssAnimations: true,

  // the duration of the animation
  cssAnimationsDuration: 360,

  // "slide" || "fade"
  cssAnimationsStyle: 'slide', 

  // allows space key
  keysAllowSpacebar: true,
  keysSpacebarText: 'Space',

  // font family
  keysFontFamily: 'sans-serif',

  // font size
  keysFontSize: '22px',

  // font weight
  keysFontWeight: 'normal',

  // icon size
  keysIconSize: '25px',

  // prevent mobile keyboard
  allowMobileKeyboard: false,

  // scroll the document to the top of the input/textarea element
  autoScroll: true


v1.4.0 (04/22/2021)

  • Fixed: The dispatcher issue on the input change event has been fixed
  • Fixed: The current text selection issue has been fixed
  • Added: The max and maxlength attribute controls have been added
  • Added: The options parameter has been added to the Run() function to set the initialize options. => KioskBoard.Run(selector, options);
  • Changed: The selector parameter has been changed to selectorOrElement that also can use an element instead of the query selector. => KioskBoard.Run(selectorOrElement);
  • Changed: The Merge() function has been deprecated.

v1.3.3 (08/28/2020)

  • Fixed: “AllowMobileKeyboard” option was not working properly on iOS devices.

v1.3.2 (08/20/2020)

  • Added: Internet Explorer 11 compatibility.
  • Fixed: Fixes on checking the “window.location.protocol”.
  • Added: IE polyfill for the CustomEvent constructor.

v1.3.0 (08/19/2020)

  • Changed: kioskboard.css, and kioskboard.js files have been moved from dist folder to src folder.
  • Changed: kioskboard-aio.js file has been moved from dist folder to src/all-in-one folder.
  • Added: autoScroll option has been added. Scrolling the document to the top of the input/textarea element can be manageable with this option. The default value is true as before.
  • Fixed: Fixes for the input element’s selectionStart method to prevent issues if the input element type is number. (#1)
  • Changed: Code Review.

v1.1.0 (11/11/2019)

  • Added: “allowMobileKeyboard” option


KioskBoard Light Theme

KioskBoard Light Theme

KioskBoard Dark Theme

KioskBoard Dark Theme

KioskBoard Flat Theme

KioskBoard Flat Theme

KioskBoard Material Theme

KioskBoard Material Theme

KioskBoard Oldschool Theme

KioskBoard Oldschool Theme

KioskBoard Numpad

KioskBoard Numpad


v1.2.1 (03/21/2020)

  • Fixed: Document Object Model definition fixes.

v1.2.0 (02/29/2020)

  • Added: Universal Module Definition.

v1.1.1 (02/17/2020)

  • Code review

You Might Be Interested In:

Leave a Reply