simple-keyboard, a customisable and responsive on-screen virtual keyboard for Javascript projects

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.

 

 

 

View Demo

 

 

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>

Edit krzkx19rr

 

That’s pretty much all the code you need to get going!

 

If you prefer to use a CDN instead, that is supported as well.

https://github.com/hodgef/simple-keyboard#usage-with-cdn

 

While “simple” is in the name, simple-keyboard fits a large number of use-cases. This is thanks to its many forces:

 

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

 

Ready to try it out?

 

Check-out simple-keyboard on GitHub.

Learn more about simple-keyboard on its Project Page.

Share your thoughts