furcan / kioskboard Goto Github PK

#4 (comment)

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).

Describe the bug

Under special circumstances the keyboard covers the input and the window is not scrolled to make the input visible even though autoscroll is turned on.

E.g.:
window size: 1024x768
keyboardsize: 1024x540

theInput.getBoundingClientRect()
DOMRect {x: 239, y: 238, width: 546, height: 54, top: 238, …}
bottom: 292
height: 54
left: 239
right: 785
top: 238
width: 546
x: 239
y: 238

Screenshots

An option that allows you to show the classic blinking cursor inside the text fields would be useful

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?

What about using of dead keys? E.g. to enter text in greek I need to press some keys first and than another key with vowels in order to input diacritic.

Lib updated from 1.2.1 to 1.3.0. No code changes at my side.
The Kioskboard doesn't load because of the error 'The Browser has blocked this request by CORS policy.'

Checked the source and I think there is a code bug:

The 'protocol' variable will never have the value given in the array 'protocolSchemas', because of the ':' postfix (http:).

Chrome version: Version 83.0.4103.116 (Official Build) (64-bit)

Hi Furcan,

Great script you created!
Could you make a possibility to hide mobile keyboard but allow physical keyboard?

I want to use the physical on my computer but don't want a double keyboard on mobile :)

Many Thanks!

Rory Meijer

how to use this package with typescript??

Describe the bug

When special characters are enabled and the keyboard's height takes up more then 2/3 of the window's height the close button of the specialcharacters window is not visible.

Steps to reproduce

1. Setup a keyboard with special characters enabled.
2. Open the keyboard in a window resized so that the keyboard takes up more than 2/3 of the window height. If you initially opened a higher window and then resized it, refresh the browser.
3. Activate the special characters on the keyboard.

Result: Special characters Close button not visible.

Expected behavior

Special characters close button should be always visible when special characters are activated.

Screenshots

Additional context

This was an issue for us on ipad mini 1024x768 for us, see screenshot. The issue came from these lines in kioskboard.js:

    // check window and keyboard height: begin
    var windowHeight = Math.round(window.innerHeight);
    var documentHeight = Math.round(window.document.body.clientHeight);
    var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight);
    if (keyboardHeight > Math.round((windowHeight / 3) * 2)) {
      var keyboardWrapper = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0];
      keyboardWrapper.style.maxHeight = Math.round((windowHeight / 5) * 4) + 'px';
      keyboardWrapper.style.overflowX = 'hidden';
      keyboardWrapper.style.overflowY = 'auto';
      keyboardWrapper.classList.add('kioskboard-overflow');
    }

On the above screenshot the keyboard took up more than 2/3 of the screen but less than 4/5. So even though the kioskboard-overflow class and the additional styles were added by the above lines, there is no scrollbar visible on the screenshot. But since overflow-y is not set to "visible" anymore and the absolutely positioned special characters close button's top is set to -42.5px, the button is not visible anymore as it's outside of the boundaries of the relatively positioned kioskboard-wrapper div.

As a workaround (not a fix) I've added this css rule:
#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close {
top:0 !important;
}

This forced the closebutton back into the kioskboard-wrapper's visible area:

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.

Hi,
Let say I have initial value in input text : 'ABC DEF'
then I want to insert 123 between C and D.
It must to be : 'ABC123 DEF'
But when I type 123, VK always produce : 'ABC1 DEF23'

config :

theme: 'material',
capsLockActive: true,
allowRealKeyboard: true,
cssAnimations: true,
cssAnimationsDuration: 360,
cssAnimationsStyle: 'slide',
keysAllowSpacebar: true,
keysSpacebarText: 'Space',
keysFontFamily: 'sans-serif',
keysFontSize: '22px',
keysFontWeight: 'normal',
keysIconSize: '25px',
allowMobileKeyboard: true,
autoScroll: true

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.

I have an issue while using the KioskBoard, i use it with a bootstrap modal which has an input, once the modal is closed i'm trying to reset the input value by setting it to "" or to 0, but once i open it again and press one of the keys of the KioskBoard it will even set the old value, does the KioskBoard save the old value in some data attribute?

Hi Mate, is it possible to integrate kioskboard with nuxt/vue js 3 ?

Hello,

I have a input field linked with a KioskBoard instance. For instance, I am using a numeric keyboard with allowRealKeyboard = false set as a parameter for KioskBoard.init method. Consider the following nesting elements which I am using:

<h2 class="yields"> Meta: <input class="js-virtual-keyboard" data-kioskboard-type="numpad" data-kioskboard-placement="bottom" type="number" bind:value= {someVariableInScript}> </h2>

As you can see, I made sure to put the bind:value attribute to the input element. However, when I use the virtual keypad and set any value, the variable does not pick up the value entered from the keypad, as if the input field never updates.

Is there any way in which I can access to a keyboard value (associated with its input element) when modify through its keypads (just clicking over them)? Thanks in advance!

I think it's a feature request, but could be usefull to others who uses the KioskBoard...
We'are started to use our displays vertically and noticed the HTML keyboard is at the bottom of the screen and not so UX ready.

The expected operation would be to show keyboard under the textbox like in this picture

@furcan what do you think how could we handle this issue easily?

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?

Hi,

Having problems getting this to run, surley I'm doing something wrong, I have no clue what tho:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test</title>

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

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

</head>

<body>
	
	<textarea class="virtual-keyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" placeholder="Your Address"></textarea>

	<input class="virtual-keyboard" data-kioskboard-type="keyboard" data-kioskboard-specialcharacters="false" placeholder="Your Name" />

	<input class="virtual-keyboard" data-kioskboard-type="numpad" placeholder="Your Number" />
	
	<script>
		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,
		});
	</script>

	<script>
// Run KioskBoard
// Select any input or textarea element(s) to run KioskBoard
		KioskBoard.Run('.virtual-keyboard');
	</script>
	
</body>
</html>

Would greatly appreciate some assistance.

I think there is a conflict between how Vuetify controls the keyboard input and Kioskboard.
If you add Vuetify textboxes to your project and give the id of the field to Kioskboard to load on focus the gonna be no input.

To reproduce it just add a vue project and vuetify to it.
Then get the id of the field(class is not possible at first glance that I had because vuetify wraps the textbox inside a div element) and then give it to the kiosk and then when the keyboard popsup you have no input.

Here is an example (Its dirty but you get the point ^^)
https://jsfiddle.net/gLw5e1rj/9/

Hello again.

I'm still trying to get your keyboard to work with this project that I have, the issue I'm having now is this: I got the keyboard to showup correctly, however, when I use it to type text into a text field the caracter are writing backwards and when I click out of it the field gets emptied, I've linked a video here on the bottom to show the issue happening. Any idea what could be causing this? BTW this are Material Ui field components.

I appreciate your help!

Video Here

Hi,

I tested your virtual keyboard and like it very much. Although there is, I think, an enhancement to make it closer to real life keyboard. Besides of the regular alphabet letters, there are punctuation signs and the javascript does know how to handle local lower case of '?' for instance...
I suggest that the JSON keyboard definition could contain a 2 letter string in some cases to define upper case and lower case, respectively, of the character to show.

example: for a basic french keyboard would be:

[ 
  { "0": "A", "1": "Z", "2": "E", "3": "R", "4": "T", "5": "Y", "6": "U", "7": "I", "8": "O", "9": "P"},
  { "0": "Q", "1": "S", "2": "D", "3": "F", "4": "G", "5": "H", "6": "J", "7": "K", "8": "L", "9": "M"},
  { "0": "W", "1": "X", "2": "C", "3": "V", "4": "B", "5": "N", "6": "?,", "7": ".;", "8": "/:", "9": "+="}
]

Hi @furcan
I see that kioskboard is not working on IE, need some polyfill to resolve this issue. The good news is that we have done it. Could you please insert it to the right place?

(function () {
    if (typeof window.Event === "function") return false; //kioskboard on IE (IE: typeof window.Event is object, othe browsers: typeof window.Event is function)

    function Event(event, params) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
        return evt;
    }

    Event.prototype = window.Event.prototype;

    window.Event = Event;
})();

I want to have a function that opens the automatic keyboard when the page loads.
thanks

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>

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

If you have a input field and allow the user to use the physical keyboard as well (allowRealKeyboard and allowMobileKeyboard are both true). The user then leaves the input field by pressing the tab key causes the onscreen keyboard to remain visible. However in this case the input field it should disappear. Same as if you clicked outside the listener.

Hi, how can I add dot to numpad keyboard?

Do you have any built in events like when the keyboard is closed. I am trying to run an ajax script when the input is changed, but when the keyboard is open the input looses focus and marks changed with each key typed.

Great library m8. Using it with React v 17.0.2.

On key press, the button reaction is very subtle. is there an option to increate the size of the key pressed or maybe change it's color to a different one momentarily ?

Is there a way to close the keyboard programmatically on a button click or other?

Dear,

Is there any way to reduce the height of keyboard panel, and also smaller size key?
Currently the height of keyboard panel is about half of my screen height, and will easily cover other elements.

Love the keyboard - but I am noticing that on older devices using ChromeOS or Android and Chrome browser are having performance issues when clicking. It seems to ignore touches for some time. Would this an animation or latency issue?

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?

I'm attempting to use KioskBoard in a Node-RED implementation running on Raspberry Pi OS.

I have installed using npm install kioskboard which appears to have succeeded with kioskboard being installed in the .node-red/node_modules/kioskboard directory.

I am including KioskBoard in the Node-RED settings.js through:

functionGlobalContext: { KioskBoard:require('kioskboard') },

This fails on Node-RED loading with the following errors:

TypeError: Cannot read property 'prototype' of undefined
    at /home/pi/.node-red/node_modules/kioskboard/dist/kioskboard-aio-1.3.3.min.js:3:24247
    at /home/pi/.node-red/node_modules/kioskboard/dist/kioskboard-aio-1.3.3.min.js:3:24269
    at /home/pi/.node-red/node_modules/kioskboard/dist/kioskboard-aio-1.3.3.min.js:3:161
    at Object.<anonymous> (/home/pi/.node-red/node_modules/kioskboard/dist/kioskboard-aio-1.3.3.min.js:3:185)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)

Any ideas on why this would be happening?

Hi,

I noticed that the original code does not check the field length against the maxlength attribute that might be associated to the input field.
In order to do that, the javascript inputFocusListener function must be modified to include a new variable:

          var theInputMaxLenAttr = theInput.getAttribute('maxlength');

and to use this value later on in the keysClickListeners function:

                  // add value by index
                  if ((theInputMaxLenAttr === null) || (theInputValArray.length < theInputMaxLenAttr)) {
                      theInputValArray.splice(theInputSelIndex, 0, keyValue);
                  }

Is there a way to add the "enter/return" key?

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?

Hello,

I'm looking for something that can simulate the proper keyboard events. Just curious if this does that?

When page has loaded and input has got a focus KioskBoard is showing perfectly without Moblie keyboard. But when user taps into the input or starts to type with KioskBoard, unfortunately iOS shows their keyboard despite AllowMobileKeyboard is false.

I tested with:
Ipad Pro 12.9"
iOS 13.6.1
Chrome browser 85.0.4183.72

On Droid works as expected!

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 !

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.

Hello, how to insert the virtual keyboard into a mat-table cell

Dear,

There is an issue that in change event for INPUT, you always get the old value.
For example, if currently the value for INPUT is "abc", and then click the VK key "d", you got "abcd" in INPUT, and in the meantime, change event triggered for INPUT and in this event, if you try to get the value of INPUT, you still got "abc".

By going through your code, I found that "input.dispatchEvent(changeEvent);" was executed before "input.value = theInputValArray.join('');" which might cause this problem.

Please consider to make relevant modification.
Thank you very much.

It would be nice, if it is possible to add additional keys like "," or "." to the numpad in future.

Greetings
Mathias

Hi, I tried to look around but no lock, any chance I can keep the keyboard always shown and visible and fixed in a certain area on the page?

Is there some way of implementing dynamic language change when the keyboard is running? I imagine it like having aditional buttons with language abbriviation (RU/EN/BG), and when the user clicks them, the keyboard changes its layout and buttons.

Hello, how to insert the virtual keyboard into a mat-table cell

Any specific iteration for ReactJS ?