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.

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.
• data-kioskboard-placement: sets the placement of the keyboard on top or bottom for each input/textarea element. Default: bottom.

<textarea class="virtual-keyboard" 
          data-kioskboard-type="all" 
          data-kioskboard-specialcharacters="true"
          data-kioskboard-placement="top">
</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.3.0 (10/17/2022)

• Suggested fix for Autoscroll not happening
• enter key added

v2.2.0 (04/13/2022)

• Text encoding board-keys-*.json change to UTF-8
• Fix the autofocus behavior
• Using kioskboard in embedded webview
• Add long press feature
• Avoiding CORS in Electron feature

v2.1.0 (02/20/2022)

• Added: Input based data-kioskboard-placement data attribute option has been added. This option sets the placement of the keyboard on top or bottom for each input/textarea element. The default value is bottom.

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 Dark Theme

KioskBoard Flat Theme

KioskBoard Material Theme

KioskBoard Oldschool Theme

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