KioskBoard - A pure JavaScript library for using virtual keyboards.

Furkan MT

Last update: Dec 29, 2022

Overview

KioskBoard - Virtual Keyboard

A pure JavaScript library for using virtual keyboards.

Current Version

2.0.0 *

Documentation and Demo

https://furcan.github.io/KioskBoard/

Browser Compatibility

Chrome || Firefox || Safari || Opera || Edge || IE 11

(A) Install & Import

Install

yarn

yarn add kioskboard

npm

npm i kioskboard

Import

import KioskBoard from 'kioskboard';

(B) Adding to an HTML Document

CSS and JS

<link rel="stylesheet" href="dist/kioskboard-2.0.0.min.css" />

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

Or only JS (All in One - Internal CSS)

<script src="dist/kioskboard-aio-2.0.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 ones are optional. 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 as globally for all input and/or textarea elements to run KioskBoard.

HTML => (data-* options)

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

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

<!-- An example of an input element: Rhe keyboard type is "numpad". (Special characters are not allowed for "numpad".) -->
<input class="js-virtual-keyboard" data-kioskboard-type="numpad" placeholder="Your Number" />

JS => (Step1: 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: 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',

  // 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',

  // Allow or deny Spacebar 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',

  // Scrolls the document to the top of the input/textarea element. Prevented when "false"
  autoScroll: true,
});

JS => (Step2: Run)

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

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

OR

JS => (Run with Init)

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

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

Language (JSON)

The keysJsonUrl option has to be set if custom keys are not defined with the keysArrayOfObjects option. JSON format has to be: [{"key":"value", "key":"value"}, ...]. Each object in that array creates a row element (HTML) on the keyboard. The "key" in the objects is used as an "index" for each Keyboard Keys. The "value" is each key's value and inner text.

Additionally, KioskBoard includes 9 different language packages: Arabic, English, French, German, Hungarian, Persian, Russian, Spanish, and Turkish.

An example of a JSON file (for custom keys) in 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"
   }
]

Copyright

License

MIT license - https://opensource.org/licenses/MIT

Comments

Positioning of the keyboard

Hi, great keyboard, thanks! Just a quick question - I’d like to position the keyboard to the top of the screen for some inputs, any suggestions on how to achieve that?
enhancement question done

opened by kristinebow 9
Bug on IE11

Hello, I'm doing a project on IE11, by integrating kioskboard on my page everything works correctly on chrome and firefox. But on internet explorer 11, the developer console displays an error SCRIPT1014 invalid character in the file kioskboard-1.4.0.min.js at (3,17779).

The bug also appears in the file kioskboard-aio-1.4.0.min.js at (3,35291)

It seems to come from this part of the code

Thanks for your help !
bug done

opened by DestroyCom 7
[FEAT] - Always show keyboard/numpad

This is great but I need to used it in a modal where I always it displayed. I need to override the typical auto popup. Is there an easy way to do that?

Ideally I could have an allwaysOn = true or similar

Anything CSS is fine

I also cannot get it to show itself with a click() method. is there another way?

Thanks!

UPDATE: I see this was already requested but not possible? I am trying to use it on a 800x480 screen for a device and it is just not possible as it is now. I can scale it but I need to have it open in javascript or stay always open on my modal. This is by far the best keyboard I have found and I would really like to get it to work for my application.
enhancement

opened by newts 6
Keys Reordering for numpad

Is there a way to reorder the numpad to start from 1 at the top and end with 0, then the backspace? Can we have the enter key on the numpad? How about a clipboard option to paste data directly from clipboard to input?
enhancement done

opened by onuh 6
[FEAT] - Add close button

A few users have the problem that they do not know how to close the keyboard. Therefore, in my opinion, it would make sense to offer a "close button" that is displayed at the top right. Another option would be a "confirmation button" (e.g. Confirm, OK, Apply).
enhancement

opened by Int32Overflow 5
[FEAT] - Add Enter button

I would like to end typing text into the search input field by pressing Enter, but I'm not sure if there is a way to add Enter key to the keyboard layout.

I've tried using the 'input' event listener on the input field to filter search results as you type so there wouldn't be a need for Enter/Return button, but while the event is triggered while using a real keyboard, it is not triggered when using KioskBoard virtual keyboard.

Adding an Enter button to the virtual keyboard, that would end entry to the input field and remove the onscreen keyboard could solve my problem.
enhancement

opened by inovosel 5

`allowRealKeyboard` not working

I fail to make allowRealKeyboard: true, working; meaning I can trigger the keyboard and type there, but I can't use the actual keyboard for typing. Below is my failing example (located in the root of hte KioskBoard repo). Thanks for your help!!!

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <form>
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">Email address</label>
          <input type="text" class="form-control js-kioskboard-input" aria-label="Username" aria-describedby="basic-addon1" data-kioskboard-type="all" data-kioskboard-specialcharacters="true">

          <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
    -->
    <script src="dist/kioskboard-aio-1.4.0.min.js"></script>
    <script>
        var germanKeys = [
            {
                "0": "Q",
                "1": "W",
                "2": "E",
                "3": "R",
                "4": "T",
                "5": "Z",
                "6": "U",
                "7": "I",
                "8": "O",
                "9": "P",
                "10": "ß"
            },
            {
                "0": "A",
                "1": "S",
                "2": "D",
                "3": "F",
                "4": "G",
                "5": "H",
                "6": "J",
                "7": "K",
                "8": "L",
                "9": "Ö",
                "10": "Ä"
            },
            {
                "0": "Y",
                "1": "X",
                "2": "C",
                "3": "V",
                "4": "B",
                "5": "N",
                "6": "M",
                "7": "-"
            },
            {
                "0": "ë",
                "1": "ç"
            }
        ]
        KioskBoard.Init({
            keysArrayOfObjects: germanKeys,
            specialCharactersObject: false,
            language: 'en',
            theme: 'light',
            capsLockActive: false,
            allowRealKeyboard: true,
            versionsallowMobileKeyboard: true,
            autoScroll: false,
        });
        KioskBoard.Run('.js-kioskboard-input');
    </script>
  </body>
</html>

question

opened by csae8092 5

Custom key with multiple characters

if I create a key that inserts more characters, it is no longer possible to delete the input because the length of the input exceeds the length of the aray where the characters are saved. I have created a fork to solve this problem. https://github.com/skullab/KioskBoard
bug fixed

opened by skullab 4
Kioskboard writes numbers backwards when input type=number

Is it normal when I set input type=number the kiskboard with default config writes numbers backwards? For example: I press number buttons in order 1 2 3 and it writes 3 2 1 to html input.

Is there a way to configure it to works as input type=tel?

bug fixed

opened by surexxx 4
Suggested fix for Autoscroll not happening

As far as I could understand how the autoscroll and the modified section of the code works: 1.) We calculate a padding we add to the body to increase it's innerheight so that the keyboard does not cover anything from the contents. 2.) If autoscroll enabled we scroll to the input.

Why I changed modified the inputTreshold calculation: The issue described in https://github.com/furcan/KioskBoard/issues/61 was caused by the inputTreshold variable. In this scenario:

window size: 1024x768 keyboardsize: 1024x540 theInput.getBoundingClientRect() DOMRect {x: 239, y: 238, width: 546, height: 54, top: 238, …}

Both isPaddingTop and isPaddingBottom are false. If the inputTreshold variable hadn't decreased the theInputOffsetTop variable's value, the isPaddingBottom would be true.

If I understand the purpose of the inputTreshold variable, it ensures that when the scrolling happens, there is some space left between the keyboard and the input. I suggest to use this variable only when calculating the scroll position, and not when we calculate wether we need body padding or not.

Why I introduced the new inputVisibleEdge variable: When deciding wether we need the a body padding we want to ensure that in case of a bottom keyboard the top of the input remains visible, in case of a top keyboard the bottom of the keyboard stays visible. When deciding where to scroll, I'd always want to scroll to the top of the input.

The original inputTop and theInputOffsetTop variables were initialized so: var inputTop = (isPlacementTop ? theInput.getBoundingClientRect().bottom : theInput.getBoundingClientRect().top) || 0; var inputThreshold = isPlacementTop ? (theInput.clientHeight + 20) : 50; var theInputOffsetTop = Math.round(inputTop + docTop) - inputThreshold;

So in case of a top keyboard the code first set inputTop to the bottom of the input, then decreased this with the height of the input, which is the top of the input. So theInputOffsetTop was the top of the input in both cases increased by 20 or 50. This was ok for the scrolling, but not ok when inspecting wether we need a body padding or not.

Why I recalculated the boundingClientRect of the input before scrolling: In case of a top keyboard, when padding top is added to the body the boundingClientRect will change, and has to be recalculated.

opened by revaij83 3
Working with react?

Hello

I'm wondering if you could help me, how can I get this keyboard to work with react, I've added the classname and data type to the input field,

did the import KioskBoard from 'kioskboard'

and did also the Kioskboard.init and .run, however we cannot get the keyboard to render on the page. Could you shed some light?
question

opened by robergwillian 3

[FEAT] - Add keyboard events, onOpen and onClose

I don't know when the keyboard is opened or closed

I would like to know when a keyboard is fucussed or not, eg: on init or run functions should have the onOpen and onClose callbacks for better experience

For example:

KioskBoard.init({
     // some codes,
    onOpen: () => {
      // keyboard opened
    },
    onClose: () => {
      // keyboard closed
    }
});

KioskBoard.run('.js-kioskboard-input', {
    // some codes,
    onOpen: () => {
      // keyboard opened
    },
    onClose: () => {
      // keyboard closed
    }
});

enhancement

opened by mussacharles60 0

[BUG] - Removing the last key from the input when we enable allowRealKeyboard

Describe the bug

When we need to activate the real keyboard we have problem that remove the last key from the input when we press on any key of KioskBoard keyboard
bug

opened by abdelkarimfares 0
[FEAT] - keysEnterCallback - send the bound input as a parameter

Is your feature request related to a problem? Please describe.

I'm trying to take advantage of the new keysEnterCallback feature but I have no way to tell which input the callback is being triggered for.

Describe the solution you'd like

I'd like the input that the keyboard is bound-to, to be sent along as a parameter of keysEnterCallback.
enhancement

opened by dnapierata 0
[FEAT] - Display for the keyboard
Is your feature request related to a problem? Please describe.

I'm developing a control system that can be accessed using a web browser. This screen don't use regular input fields, but I need to edit some values when I click them. I'm trying to implement using jQuery.numpap, and the project is clearly discontinued and buggy.

Describe the solution you'd like

I want to have a behavior like the picture bellow. When I click, a numpad opens with an input filed. KioskBoard is clearly beautiful, and I will enjoy to use it, as long I have an input filed.

Describe alternatives you've considered

I'm trying to re-write jQuery.numpad and jQuery.numpad2 (the only fork with 2 years old commit) to fit my needs. It also have some flaws like:

Input from keyboard is not detected.

Check if input is ok, e.g. I can't send "Hello world" if the filed is motor speed.

enhancement
opened by thalesmaoa 0
[FEAT] - Button to toggle keyboard

The possibility to toggle the keyboard with a button would be nice. Then you could write on any focused element, not only inputs and textareas. For example in the search field of a selectpicker.
enhancement

opened by Bloodydevil 0

Releases(v2.3.0)

v2.3.0(Oct 16, 2022)
What's Changed

Suggested fix for Autoscroll not happening by @revaij83 in https://github.com/furcan/KioskBoard/pull/62

enter key added by @furcan in https://github.com/furcan/KioskBoard/pull/66

New Contributors

@revaij83 made their first contribution in https://github.com/furcan/KioskBoard/pull/62

@furcan made their first contribution in https://github.com/furcan/KioskBoard/pull/66

Full Changelog: https://github.com/furcan/KioskBoard/compare/v2.2.0...v2.3.0
Source code(tar.gz)
Source code(zip)
v2.2.0(Apr 13, 2022)
What's Changed

Text encoding board-keys-*.json change to UTF-8 by @densen2014 in https://github.com/furcan/KioskBoard/pull/48

Fix the autofocus behavior by @surexxx in https://github.com/furcan/KioskBoard/pull/52

Using kioskboard in embedded webview by @surexxx in https://github.com/furcan/KioskBoard/pull/51

Add long press feature by @surexxx in https://github.com/furcan/KioskBoard/pull/53

Avoiding CORS in Electron feature by @furcan in https://github.com/furcan/KioskBoard/issues/46

New Contributors

@densen2014 made their first contribution in https://github.com/furcan/KioskBoard/pull/48

Full Changelog: https://github.com/furcan/KioskBoard/compare/v2.1.0...v2.2.0
Source code(tar.gz)
Source code(zip)
v2.1.0(Feb 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.

<input class="js-kioskboard" data-kioskboard-type="keyboard" data-kioskboard-placement="top" placeholder="Your Name" />

Added: TypeScript declaration has been added.

Changed: Refactor.

Source code(tar.gz)
Source code(zip)
v2.0.0(Dec 11, 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: (#31)

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] - (#30)

Source code(tar.gz)
Source code(zip)
v1.4.0(Apr 21, 2021)
Fixed: The dispatcher issue on the input change event has been fixed: (#11)

Fixed: The current text selection issue has been fixed: (#19)

Added: The max and maxlength attribute controls have been added: (#17)

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.

Source code(tar.gz)
Source code(zip)
v1.3.3(Aug 27, 2020)

Fixed: "AllowMobileKeyboard" option was not working properly on iOS devices. (#7)
Source code(tar.gz)
Source code(zip)
v1.3.2(Aug 19, 2020)

Added: Internet Explorer 11 compatibility. (#3)

Fixed: Fixes on checking the "window.location.protocol". (#4)

Added: IE polyfill for the CustomEvent constructor. (#3)

Changed: Code Review.
Source code(tar.gz)
Source code(zip)
v1.3.0(Aug 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.
Source code(tar.gz)
Source code(zip)
v1.2.1(Mar 20, 2020)

Fixed: Document Object Model definition fixes.
Source code(tar.gz)
Source code(zip)
v1.2.0(Feb 28, 2020)

Added: Universal Module Definition. Changed: Code Review
Source code(tar.gz)
Source code(zip)
v1.1.1(Feb 16, 2020)

Code Review
Source code(tar.gz)
Source code(zip)
v1.1.0(Nov 11, 2019)

1- Added: "allowMobileKeyboard" option is added. Default value is "false" and prevents mobile keyboard.

2- Code Review
Source code(tar.gz)
Source code(zip)
v1.0.0(Oct 31, 2019)

KioskBoard is a pure JavaScript library for using the Virtual Keyboard.
Source code(tar.gz)
Source code(zip)