Responsive Mobile-compatible Virtual Keyboard In JavaScript – simple-keyboard

Preview:

Description:

A simple yet customizable, fully responsive on-screen virtual keyboard for both mobile, tablet and desktop.

How to use it:

Install & Download with NPM.

# NPM
$ npm install simple-keyboard --save

Import the package as a module.

import Keyboard from 'simple-keyboard';

Import the necessary stylesheet.

import './css/index.css';

Create the keyboard container & matched input field.

<input class="input">
<div class="simple-keyboard"></div>

Attach the Virtual Keyboard to the input field.

let myKeyboard = new Keyboard();

Execute a callback when the input field changes.

let myKeyboard = new Keyboard({
    onChange: function(input) {
      document.querySelector(".input").value = input;
      console.log("Input changed", input);
    }
});

Execute a callback when a key is pressed.

let myKeyboard = new Keyboard({
    onKeyPress: function(button) {
      console.log("Button pressed", button);
    }
});

Disable double-tap to zoom in iOS 10+ as it interferes with simple-keyboard.

body,
html {
  touch-action: manipulation;
}