Easy Virtual Keyboard & Number Pad Library – onscreen-keyboard.js

Preview:

Description:

A tiny Vanilla JavaScript library that automatically attaches a virtual keyboard or a number pad to text fields based on the input type.

How to use it:

1. Just import the onscreen-keyboard.js library into your document and the library will do the rest.

<!-- JavaScript -->
<script src="onscreen-keyboard.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />

2. Override the default settings at the beginning of the onscreen-keyboard.js.

const Keyboard = {
  multiMode: true,
  selectedElement: "",
  elements: {
    main: null,
    keysContainer: null,
    keys: []
  },
  keyboard_type: "numeric", // 'alfa'
  eventHandlers: {
    oninput: null,
    onclose: null
  },
  properties: {
    value: "",
    capsLock: false
  },
  // ...
}