Multi-language Themeable Virtual Keyboard/Numpad – KioskBoard

Category: Javascript | August 28, 2020
Author: furcan
Views Total: 396 views
Official Page: Go to website
Last Update: August 28, 2020
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-hungarian.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,

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

Changelog:

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

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

Changelog:

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