In the past few years, I’ve grown an interest in the experience offered by interactive touch Kiosks. They are a great way to engage an event audience, to break passivity and to let everyone to partake in the fun.
Part of this experience lies with the kiosk onscreen keyboard. It shouldn’t be annoying for the end-user to operate, and the same empathy should be extended to the developer.
To make things easy for myself and other developers, I’ve developed simple-keyboard.
As the name suggests, simple-keyboard is simple to use. This is a basic setup of the plugin:
JS:
import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css';
let keyboard = new Keyboard({
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button)
});
function onChange(input){
document.querySelector(".input").value = input;
console.log("Input changed", input);
}
function onKeyPress(button){
console.log("Button pressed", button);
}
HTML:
<input class="input" />
<div class="simple-keyboard"></div>
That’s pretty much all the code you need to get going!
If you prefer to use a CDN or self-host, that is supported as well.
https://simple-keyboard.com/getting-started/#usage-cdn
While “simple” is in the name, simple-keyboard fits a large number of use-cases. This is thanks to its many features:
- Ability to target buttons individually or in groups for styling (special css classes).
- Customization-friendly design. Flex-box design where the keys are organized in rows and not with <br /> tags. This gives you a great deal of flexibility to style every aspect of the keyboard.
- Custom layouts and classes. Virtually every option is configurable and accessible in real time.
- No dependencies. You don’t have to import an entire library (like jQuery) to make simple-keyboard work.
- Cross-compatibility. You can use simple-keyboard in your React, Angular, Vue or Vanilla Javascript project, because simple-keyboard is coded in pure ES6 JS.
- Tiny size. ~5kb. In comparison, jQuery virtual keyboards have to deal with 30kB extra in size (after gzip).
