A pure JavaScript library for using the Virtual Keyboard.
1.4.0 *
https://furcan.github.io/KioskBoard/
Chrome - Firefox - Safari - Opera - Edge - IE 11
Install
npm i kioskboardyarn add kioskboardImport
import KioskBoard from "kioskboard";<link rel="stylesheet" href="dist/kioskboard-1.4.0.min.css" />
<script src="dist/kioskboard-1.4.0.min.js"></script><script src="dist/kioskboard-aio-1.4.0.min.js"></script>3 types of keyboards can be used: all, keyboard, and numpad.
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.
<!-- 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" />// 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,
});// Select the input or the textarea element(s) to run the KioskBoard
KioskBoard.Run('.virtual-keyboard');// Select the input or the textarea element(s) to run the KioskBoard
KioskBoard.Run('.virtual-keyboard', {
// ...init options
});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',
// });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 © 2021 KioskBoard - Virtual Keyboard
MIT license - https://opensource.org/licenses/MIT