furcan / kioskboard Goto Github PK
View Code? Open in Web Editor NEWKioskBoard - A pure JavaScript library for using virtual keyboards.
Home Page: https://furcan.github.io/KioskBoard/
License: MIT License
KioskBoard - A pure JavaScript library for using virtual keyboards.
Home Page: https://furcan.github.io/KioskBoard/
License: MIT License
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.
Hello, how to insert the virtual keyboard into a mat-table cell
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?
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.
I want to have a function that opens the automatic keyboard when the page loads.
thanks
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!
Hello, how to insert the virtual keyboard into a mat-table cell
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 Mate, is it possible to integrate kioskboard with nuxt/vue js 3 ?
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.
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)
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/
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
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.
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
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;
})();
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
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.
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?
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);
}
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).
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.
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.
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
Hello,
I'm looking for something that can simulate the proper keyboard events. Just curious if this does that?
Hi, how can I add dot to numpad keyboard?
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!
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?
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.
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>
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?
Is there a way to add the "enter/return" key?
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?
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.
Result: Special characters Close button not visible.
Special characters close button should be always visible when special characters are activated.
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:
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?
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 !
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!
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.
It would be nice, if it is possible to add additional keys like "," or "." to the numpad in future.
Greetings
Mathias
Any specific iteration for ReactJS ?
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,
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.
Is there a way to close the keyboard programmatically on a button click or other?
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?
how to use this package with typescript??
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.