Multi-language Themeable Virtual Keyboard/Numpad – KioskBoard

Category: Javascript | December 12, 2021
Author:furcan
Views Total:153 views
Official Page:Go to website
Last Update:December 12, 2021
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', 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" 
          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,

  /*
  * Optional: An Array of Strings can be set to override the built-in special characters.
  * e.g. ["#", "$", "%", "+", "-", "*"]
  */
  keysSpecialCharsArrayOfStrings: null,

  /*
  * Optional: An Array of Numbers can be set to override the built-in numpad keys. (From 0 to 9, in any order.)
  * e.g. [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
  */
  keysNumpadArrayOfNumbers: null,

  // language
  language: 'en',

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

  // makes Caps Lock active
  capsLockActive: true,

  // allows real keyboard
  allowRealKeyboard: false,

  // allows mobile keyboard usage
  allowMobileKeyboard: 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:

v2.0.0 (12/12/2021)

  • Removed: The KioskBoard.Merge() method has been removed. (This method already has been deprecated in v1.4.0)
  • Changed: KioskBoard.Init() function name has been changed to KioskBoard.init().
  • Changed: KioskBoard.Run() function name has been changed to KioskBoard.run().
  • Changed: Auto-generated kioskboard-aio.js file has been moved from src/all-in-one folder to build folder.
  • Changed: The specialCharactersObject option has been changed to keysSpecialCharsArrayOfStrings. An Array of Strings can be set to override the built-in special characters. e.g. => [“#”, “$”, “%”, “+”, “-“, “*”]
  • Fixed: Custom key with multiple characters
  • Added: The keysNumpadArrayOfNumbers option has been added: An Array of Numbers can be set to override the built-in numpad keys. (From 0 to 9, in any order.) e.g. => [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

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

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.4.0 (08/26//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.
  • Changed: Code Review.

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