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

Category: Javascript | July 26, 2018
Views Total:3,763 views
Official Page:Go to website
Last Update:July 26, 2018


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


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

html {
  touch-action: manipulation;

You Might Be Interested In:

Leave a Reply