simple-keyboard

Q&A / Use-cases

How to give a different base class to my keyboard

As you may have seen on the code samples, this is the default setup that simple-keyboard uses:

<div class="simple-keyboard"></div>
let keyboard = new Keyboard({
  // Add options here
});

 

You can however change this by setting up simple-keyboard like so:

<div class="myFavouriteClass"></div>
let keyboard = new Keyboard(".myFavouriteClass", {
  // If you want the default CSS styles
  theme: "simple-keyboard hg-theme-default hg-layout-default",
  // other options ...
});

 

This can come in handy especially when dealing with multiple simple keyboard instances.

How to synchronize multiple instances of simple-keyboard

As shown above, you can run multiple instances of simple-keyboard. To keep their internal inputs in sync, set the syncInstanceInputs option to true.

If you want to send a command to all your simple-keyboard instances at once, you can use the dispatch method.

Here’s a demo with both these features in action:

Here’s an example of a full keyboard made out of multiple simple-keyboard instances:

Using several inputs

Set the inputName option for each input you want to handle with simple-keyboard.

For example:

<input class="input" id="input1" value=""/>
<input class="input" id="input2" value=""/>
// Here we'll store the input id that simple-keyboard will be using.
var selectedInput;

// Initialize simple-keyboard as usual
var keyboard = new Keyboard({
  onChange: input => onChange(input)
});

// Add an event listener for the inputs to be tracked
document.querySelectorAll('.input')
  .forEach(input => input.addEventListener('focus', onInputFocus));

/**
* When an input is focused, it will be marked as selected (selectedInput)
* This is so we can replace it's value on the onChange function
*
* Also, we will set the inputName option to a unique string identifying the input (id)
* simple-keyboard save the input in this key and report changes through onChange
*/
onInputFocus = event => {
  // Setting input as selected
  selectedInput = `#${event.target.id}`;

  // Set the inputName option on the fly !
  keyboard.setOptions({
    inputName: event.target.id
  });
}

// When the current input is changed, this is called
onChange = input => {
  // If the input is not defined, grabbing the first ".input".
  let currentInput = selectedInput || '.input';

  // Updating the selected input's value
  document.querySelector(currentInput).value = input;
}

Having keys in a different language configuration

There’s a number of key layouts available. To apply them, check out simple-keyboard-layouts.

If you’d like to contribute your own layouts, please submit your pull request at the simple-keyboard-layouts repository.

How to customize my keyboard layout

If you’d like to create a layout in a language not currently supported by simple-keyboard-layouts, you definitely can.

Take following demo as an example:

If you have issues displaying a character, you might need its unicode code to display it. Here an useful converter tool:

r12a Unicode converter

Why is the caps lock button working like shift button

For the sake of simplicity, caps lock and shift do the same action in the main demos. If you’d like to show a different layout when you press caps lock, check out the following demo:

How to display a full keyboard

You can display a full keyboard by linking together multiple Simple Keyboard instances. This is because you might want different sections of your keyboard to have different spacing and styling.

Please refer to the documentation on the syncInstanceInputs option, which allows you to sync the input of all your simple-keyboard instances.

Also, check out this demo: