### Install KioskBoard

Source: https://github.com/furcan/kioskboard/blob/main/README.md

Install the KioskBoard library using either yarn or npm package managers.

```javascript
yarn add kioskboard
```

```javascript
npm i kioskboard
```

--------------------------------

### Custom Keyboard Layout JSON Example (English)

Source: https://github.com/furcan/kioskboard/blob/main/README.md

An example of a JSON file structure used to define custom keyboard layouts for KioskBoard. The JSON is an array of objects, where each object represents a row on the keyboard, and key-value pairs define the index and value of each key.

```json
[
   {
      "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"
   }
]
```

--------------------------------

### Initialize KioskBoard

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

This snippet demonstrates how to initialize the KioskBoard virtual keyboard and attach it to specific input elements. It shows the basic setup for running the keyboard on a webpage.

```javascript
const kioskBoard = new KioskBoard(".js-kioskboard-input", {
  keysEnterCallback: undefined,
  keysEnterCanClose: true,
});

// Select the input or the textarea element(s) to run the KioskBoard
KioskBoard.run('.js-kioskboard-input');
```

--------------------------------

### JavaScript Initialization

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Provides examples of initializing KioskBoard either by targeting specific input elements with a CSS selector or by globally initializing with various configuration options.

```javascript
KioskBoard.run('.js-kioskboard-input', {
  // ...init options
});
```

```javascript
// Step 1: Initialize
// Initialize KioskBoard (default/all options)
KioskBoard.init({
  /*!
   * Required
   * An Array of Objects has to be defined 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 get the keys from JSON file.)
   * e.g. '/Content/Plugins/KioskBoard/dist/kioskboard-keys-english.json'
   */
  keysJsonUrl: null,

  /*!
   * Optional: (Special Characters)
   * An Array of Strings can be set to override the built-in special characters.
   * e.g. ["#", "€", "%", "+", "-", "*"]
   */
  keysSpecialCharsArrayOfStrings: null,

  /*!
   * Optional: (Numpad Keys)
   * 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,

  // Optional: (Other Options)
  // Language Code (ISO 639-1) for custom keys (for language support) => e.g. "de" || "en" || "fr" || "hu" || "tr" etc...
  language: 'en',

  // The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
  theme: 'light',

  // Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"
  autoScroll: true,

  // Uppercase or lowercase to start. Uppercased when "true"
  capsLockActive: true,

  // Allow or prevent real/physical keyboard usage. Prevented when "false"
  // In addition, the "allowMobileKeyboard" option must be "true" as well, if the real/physical keyboard has wanted to be used.
  allowRealKeyboard: false,

  // Allow or prevent mobile keyboard usage. Prevented when "false"
  allowMobileKeyboard: 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',

  // Enable or Disable Spacebar functionality on the keyboard. The Spacebar will be passive 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',

  // Text of the Enter key (Enter/Return). Without text => " "
  keysEnterText: 'Enter',

  // The callback fu
```

--------------------------------

### JSON Custom Keys Example (English)

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

An example of how to define custom keyboard layouts using JSON format. This structure allows for defining rows and keys, where each key has an index and a value (displayed text).

```json
[{"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"}]
```

--------------------------------

### Custom Keys Example

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Shows how to define custom keys for the KioskBoard virtual keyboard using an array of objects, allowing for specific key layouts and properties.

```javascript
const customKeys = [
  ["a", "b", "c"],
  ["d", "e", "f"],
  [{"key": "Enter", "css": "keyboard-enter"}, {"key": "Shift", "css": "keyboard-shift"}]
];

KioskBoard.run('#customInput', {
  keys: customKeys
});
```

--------------------------------

### Initialize KioskBoard with JavaScript

Source: https://github.com/furcan/kioskboard/blob/main/README.md

Run KioskBoard on specified elements using a JavaScript selector and an options object for initialization. This allows for dynamic configuration of the virtual keyboard.

```javascript
// Select the input or the textarea element(s) to run the KioskBoard

KioskBoard.run('.js-virtual-keyboard', {
   // ...init options
});

// OR
```

--------------------------------

### KioskBoard Options

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Demonstrates various configuration options available when initializing KioskBoard, including keyboard type, theme, custom keys, and special characters.

```javascript
KioskBoard.run('.input-field', {
  "keys": [
    ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
    ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
    ["z", "x", "c", "v", "b", "n", "m"],
    [{"key": "Space", "size": 6, "css": "keyboard-space"}, {"key": "←", "size": 2, "css": "keyboard-backspace"}]
  ],
  "theme": ["light", "dark", "flat", "material", "oldschool"],
  "enter": "⏎",
  "bksp": "←",
  "spacebar": " ",
  "keyboardType": "all",
  "language": "en",
  "specialCharacters": true,
  "cssAnimations": true,
  "trackInput": true,
  "allowUnicode": true,
  "autoScroll": true,
  "maxLength": 100,
  "cssClass": "kioskboard-theme",
  "i18n": {
    "ar": {"numpad": ["1", "2", "3"], "spacebar": " "},
    "es": {"numpad": ["1", "2", "3"], "spacebar": " "}
  }
});
```

--------------------------------

### Initialize KioskBoard with Default Options

Source: https://github.com/furcan/kioskboard/blob/main/README.md

Initializes the KioskBoard virtual keyboard with all available options set to their default values. This includes defining custom keys, language settings, themes, and behavior for special keys like Enter and Spacebar.

```javascript
KioskBoard.init({

  /*!
  * Required
  * An Array of Objects has to be defined 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 get the keys from JSON file.)
  * e.g. '/Content/Plugins/KioskBoard/dist/kioskboard-keys-english.json'
  */
  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,

  // Optional: (Other Options)

  // Language Code (ISO 639-1) for custom keys (for language support) => e.g. "de" || "en" || "fr" || "hu" || "tr" etc...
  language: 'en',

  // The theme of keyboard => "light" || "dark" || "flat" || "material" || "oldschool"
  theme: 'light',

  // Scrolls the document to the top or bottom(by the placement option) of the input/textarea element. Prevented when "false"
  autoScroll: true,

  // Uppercase or lowercase to start. Uppercased when "true"
  capsLockActive: true,

  /*
  * Allow or prevent real/physical keyboard usage. Prevented when "false"
  * In addition, the "allowMobileKeyboard" option must be "true" as well, if the real/physical keyboard has wanted to be used.
  */
  allowRealKeyboard: false,

  // Allow or prevent mobile keyboard usage. Prevented when "false"
  allowMobileKeyboard: 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',

  // Enable or Disable Spacebar functionality on the keyboard. The Spacebar will be passive 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',

  // Text of the Enter key (Enter/Return). Without text => " "
  keysEnterText: 'Enter',

  // The callback function of the Enter key. This function will be called when the enter key has been clicked.
  keysEnterCallback: undefined,

  // The Enter key can close and remove the keyboard. Prevented when "false"
  keysEnterCanClose: true,
});
```

--------------------------------

### JavaScript Import

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Shows how to import the KioskBoard library into a JavaScript project.

```javascript
import KioskBoard from 'kioskboard';
```

--------------------------------

### Import KioskBoard

Source: https://github.com/furcan/kioskboard/blob/main/README.md

Import the KioskBoard library into your JavaScript or JSX project.

```jsx
import KioskBoard from 'kioskboard';
```

--------------------------------

### HTML Integration

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Demonstrates two methods for adding KioskBoard to an HTML file: including CSS and JS files individually, or using the all-in-one file.

```html
<link rel="stylesheet" href="dist/kioskboard-2.3.0.min.css" />
<script src="dist/kioskboard-2.3.0.min.js"></script>
```

```html
<script src="dist/kioskboard-aio-2.3.0.min.js"></script>
```

--------------------------------

### Initialize KioskBoard

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Initializes the KioskBoard virtual keyboard on a specified element. This is the primary method for integrating the keyboard into a web page. It allows for customization through an options object.

```javascript
KioskBoard.run('#input1', {
  // KioskBoard options
});
```

--------------------------------

### HTML Data Attributes for Configuration

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Illustrates how to configure KioskBoard's behavior directly within HTML elements using data attributes for keyboard type, placement, and special characters.

```html
<!-- An example of a textarea element: The keyboard type is "all", the placement is "top", and the availability of the special characters is "true". -->
<textarea class="js-kioskboard-input" data-kioskboard-type="all" data-kioskboard-placement="top" data-kioskboard-specialcharacters="true" placeholder="Your Address"></textarea>

<!-- An example of an input element: The keyboard type is "keyboard", the placement is "bottom", and the availability of the special characters is "false". -->
<input class="js-kioskboard-input" data-kioskboard-type="keyboard" data-kioskboard-placement="bottom" data-kioskboard-specialcharacters="false" placeholder="Your Name" />

<!-- An example of an input element: The keyboard type is "numpad", and the placement is "bottom". (Special characters are not allowed for "numpad".) -->
<input class="js-kioskboard-input" data-kioskboard-type="numpad" data-kioskboard-placement="bottom" placeholder="Your Number" />
```

--------------------------------

### Add KioskBoard to HTML

Source: https://github.com/furcan/kioskboard/blob/main/README.md

Include the KioskBoard CSS and JavaScript files in your HTML document. You can use the minified CSS and JS files, or an all-in-one JS file that includes internal CSS.

```html
<link rel="stylesheet" href="dist/kioskboard-2.3.0.min.css" />

<script src="dist/kioskboard-2.3.0.min.js"></script>
```

```html
<script src="dist/kioskboard-aio-2.3.0.min.js"></script>
```

--------------------------------

### Run KioskBoard on Input Elements

Source: https://github.com/furcan/kioskboard/blob/main/README.md

Applies the KioskBoard virtual keyboard functionality to specified input or textarea elements using a CSS selector. This step makes the virtual keyboard appear when these elements are focused.

```javascript
// Select the input or the textarea element(s) to run the KioskBoard

KioskBoard.run('.js-virtual-keyboard');
```

--------------------------------

### HTML Data Attributes for KioskBoard

Source: https://github.com/furcan/kioskboard/blob/main/README.md

Configure KioskBoard behavior directly in HTML using data attributes on input or textarea elements. Supported attributes include `data-kioskboard-type`, `data-kioskboard-placement`, and `data-kioskboard-specialcharacters`.

```html
<!-- Textarea with type 'all', placement 'top', and special characters enabled -->
<textarea class="js-virtual-keyboard" data-kioskboard-type="all" data-kioskboard-placement="top" data-kioskboard-specialcharacters="true" placeholder="Your Address"></textarea>

<!-- Input with type 'keyboard', placement 'bottom', and special characters disabled -->
<input class="js-virtual-keyboard" data-kioskboard-type="keyboard" data-kioskboard-placement="bottom" data-kioskboard-specialcharacters="false" placeholder="Your Name" />

<!-- Input with type 'numpad' and placement 'bottom' (special characters are not applicable) -->
<input class="js-virtual-keyboard" data-kioskboard-type="numpad" data-kioskboard-placement="bottom" placeholder="Your Number" />
```

--------------------------------

### Keyboard Keyboard Type

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Configures KioskBoard to display a standard alphabetic keyboard, optionally with special characters.

```javascript
KioskBoard.run('#keyboardInput', {
  keyboardType: 'keyboard',
  specialCharacters: true
});
```

--------------------------------

### Numpad Keyboard Type

Source: https://github.com/furcan/kioskboard/blob/main/docs/index.html

Configures KioskBoard to display only a numeric keypad, suitable for inputting numbers or PINs.

```javascript
KioskBoard.run('#numpadInput', {
  keyboardType: 'numpad'
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.