Multi-language Themeable Virtual Keyboard/Numpad – KioskBoard

Category: Javascript | November 11, 2019
Author: furcan
Views Total: 92
Official Page: Go to website
Last Update: November 11, 2019
License: MIT

Preview:

Multi-language Themeable Virtual Keyboard/Numpad  – KioskBoard

Description:

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

Features:

  • 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
$ 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-spanish.json
  • kioskboard-keys-turkish.json
KioskBoard.Init({
  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');

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" 
          data-kioskboard-type="all" 
          data-kioskboard-specialcharacters="true">
</textarea>

6. Customize the virtual keyboard.

KioskBoard.Init({ 

  /* 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
  
})

Changelog:

v1.1.0 (11/11/2019)

  • Added: “allowMobileKeyboard” option

Previews:

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

You Might Be Interested In:


Leave a Reply