KioskBoard - Virtual Keyboard
A pure JavaScript library for using the Virtual Keyboard.
Forked by Loyall
https://bitbucket.org/weconnect/kioskboard-loyall
Customize the keyboard position to fix it inside a wrapper instead of sliding from bottom of the screen.
Current Version
1.4.0 *
Documentation and Demo
https://furcan.github.io/KioskBoard/
Browser Compatibility
Chrome - Firefox - Safari - Opera - Edge - IE 11
(A) Install & Import
Install
npm
npm i kioskboardyarn
yarn add kioskboardImport
import KioskBoard from "kioskboard";(B) Adding to an HTML Document
CSS and JS
<link rel="stylesheet" href="dist/kioskboard-1.4.0.min.css" />
<script src="dist/kioskboard-1.4.0.min.js"></script>Or only JS (All in One - Internal CSS)
<script src="dist/kioskboard-aio-1.4.0.min.js"></script>Keyboard Types and Themes
3 types of keyboards can be used: all, keyboard, and numpad.
5 types of themes can be used. light, dark, flat, material, and oldschool.
Initialize / Run
KioskBoard Virtual Keyboard can be used with the input or textarea elements. KioskBoard must be initialized with the required options. The other options are optional. The keyboard type data-kioskboard-type and special characters data-kioskboard-specialcharacters settings are each element-based (data attributes). All options and examples of data attribute usages are as below. Also, a custom class name can be defined for all input or textarea elements to run KioskBoard.
HTML => (data-* options)
<!-- An example of a textarea element: Keyboard type is "all" and the availability of special characters is "true". -->
<textarea class="virtual-keyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" placeholder="Your Address"></textarea>
<!-- An example of an input element: Keyboard type is "keyboard" and the availability of special characters is "false". -->
<input class="virtual-keyboard" data-kioskboard-type="keyboard" data-kioskboard-specialcharacters="false" placeholder="Your Name" />
<!-- An example of an input element: Keyboard type is "numpad". (special characters are not allowed for the "numpad" type.) -->
<input class="virtual-keyboard" data-kioskboard-type="numpad" placeholder="Your Number" />JS => (Step1: Initialize)
// Initialize KioskBoard (default/all options)
KioskBoard.Init({
/*!
* Required
* Have to define an Array of Objects for the custom keys. Hint: Each object creates a row element (HTML) on the keyboard.
* e.g. [{"key":"value"}, {"key":"value"}] => [{"0":"A","1":"B","2":"C"}, {"0":"D","1":"E","2":"F"}]
*/
keysArrayOfObjects: null,
/*!
* Required only if "keysArrayOfObjects" is "null".
* The path of the "kioskboard-keys-${langugage}.json" file must be set to the "keysJsonUrl" option. (XMLHttpRequest to getting the keys from JSON file.)
* e.g. '/Content/Plugins/KioskBoard/dist/kioskboard-keys-english.json'
*/
keysJsonUrl: null,
/*
* Optional: (Special Characters Object)* Can override default special characters object with the new/custom one.
* e.g. {"key":"value", "key":"value", ...} => {"0":"#", "1":"$", "2":"%", "3":"+", "4":"-", "5":"*"}
*/
specialCharactersObject: null,
// Optional: (Other Options)
// Language Code (ISO 639-1) for custom keys (for language support) => e.g. "en" || "tr" || "es" || "de" || "fr" etc.
language: 'en',
// The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
theme: 'light',
// Uppercase or lowercase to start. Uppercase when "true"
capsLockActive: true,
// Allow or prevent real/physical keyboard usage. Prevented when "false"
allowRealKeyboard: false,
// CSS animations for opening or closing the keyboard
cssAnimations: true,
// CSS animations duration as millisecond
cssAnimationsDuration: 360,
// CSS animations style for opening or closing the keyboard => "slide" || "fade"
cssAnimationsStyle: 'slide',
// Allow or deny Spacebar on the keyboard. The keyboard is denied when "false"
keysAllowSpacebar: true,
// Text of the space key (spacebar). Without text => " "
keysSpacebarText: 'Space',
// Font family of the keys
keysFontFamily: 'sans-serif',
// Font size of the keys
keysFontSize: '22px',
// Font weight of the keys
keysFontWeight: 'normal',
// Size of the icon keys
keysIconSize: '25px',
// v1.1.0 and the next versions
// Allow or prevent mobile keyboard usage. Prevented when "false"
allowMobileKeyboard: false,
// v1.3.0 and the next versions
// Scrolls the document to the top of the input/textarea element. The default value is "true" as before. Prevented when "false"
autoScroll: true,
});JS => (Step2: Run)
// Select the input or the textarea element(s) to run the KioskBoard
KioskBoard.Run('.virtual-keyboard');OR
JS => (Run with Init - v1.4.0 and the next versions)
// Select the input or the textarea element(s) to run the KioskBoard
KioskBoard.Run('.virtual-keyboard', {
// ...init options
});Merge
KioskBoard.Merge({}); function has been deprecated. (v1.4.0 and the next versions)
// The Merge function extends the initialize function for a specific action or event.
// KioskBoard.Merge({
// theme: 'dark',
// });Language (JSON)
If custom keys are not defined with the keysArrayOfObjects option, the keysJsonUrl option can be used. Can create an Array of Objects for custom keys related to a custom language. Expecting JSON format is like [{"key":"value", "key":"value"}, ...] Each object in that array creates a row element (HTML) on the keyboard. The "key" in the objects is an "index" for each Keyboard Keys. Also, the "value" is each key's value and text.
Additionally, KioskBoard includes 7 different language packages: English Turkish Spanish German French Hungarian Russian
An example of a JSON file (for custom keys) is as below.
[
{
"0":"Q",
"1":"W",
"2":"E",
"3":"R",
"4":"T",
"5":"Y",
"6":"U",
"7":"I",
"8":"O",
"9":"P"
},
{
"0":"A",
"1":"S",
"2":"D",
"3":"F",
"4":"G",
"5":"H",
"6":"J",
"7":"K",
"8":"L"
},
{
"0":"Z",
"1":"X",
"2":"C",
"3":"V",
"4":"B",
"5":"N",
"6":"M"
}
]
Copyright
Copyright © 2021 KioskBoard - Virtual Keyboard
License
MIT license - https://opensource.org/licenses/MIT