Author: | furcan |
---|---|
Views Total: | 1,184 views |
Official Page: | Go to website |
Last Update: | October 16, 2022 |
License: | MIT |
Preview:

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.
- 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