3 types of keyboards can be used: all, keyboard, and numapad.
Number Keys (Static)
Custom Keys (From JSON or an Object)
Special Character Keys (Optional)
Custom Keys (From JSON or an Object)
Special Character Keys (Optional)
Number Keys (Static)
5 types of themes can be used. light, dark, flat, material, and oldschool.
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 Initialize & Run
// 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: 'en', // Language Code (ISO 639-1) for custom keys (for language support) => e.g. "en" || "tr" || "es" || "de" || "fr" etc.
theme: 'light', // The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
capsLockActive: true, // Uppercase or lowercase to start. Uppercase when "true"
allowRealKeyboard: false, // Allow or prevent real/physical keyboard usage. Prevented when "false"
cssAnimations: true, // CSS animations for opening or closing the keyboard
cssAnimationsDuration: 360, // CSS animations duration as millisecond
cssAnimationsStyle: 'slide', // CSS animations style for opening or closing the keyboard => "slide" || "fade"
keysAllowSpacebar: true, // Allow or deny Spacebar on the keyboard. The keyboard is denied when "false"
keysSpacebarText: 'Space', // Text of the space key (spacebar). Without text => " "
keysFontFamily: 'sans-serif', // Font family of the keys
keysFontSize: '22px', // Font size of the keys
keysFontWeight: 'normal', // Font weight of the keys
keysIconSize: '25px', // Size of the icon keys
});
// Run KioskBoard
KioskBoard.Run('.virtual-keyboard'); // Select any input or textarea element(s) to run KioskBoard
KioskBoard.Merge({}); function can be used to extend the Initialize function via using a specific action or event.
JS Merge
// e.g. Merge (extends the initialize)
KioskBoard.Merge({
theme: 'dark', // The Merge function extends the initialize function for a specific action or event.
});
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. An example of a JSON file (for custom keys) is as below.
Additionally, KioskBoard includes 5 different language packages: English Turkish Spanish German French
JSON Custom Keys example by English
[
{
"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"
}
]