Input Mask - simple-keyboard

Module: Input Mask

Formats input according to the user-defined mask.

Early support for physical keyboard input

From version 2.1.4 of this module, physical keyboard input has basic support:

Check out the demo:

https://simple-keyboard-autocorrect-physical-keyboard.glitch.me/

To use this functionality, please make sure to carefully follow the example code, as this setup requires specific options:

https://glitch.com/edit/#!/simple-keyboard-autocorrect-physical-keyboard

Installation

npm install simple-keyboard simple-keyboard-input-mask --save

zip file (self-hosted)

Click here to download the latest release (zip format).

Want to use a CDN instead of self-host? Scroll down to the “Usage with CDN” instructions below.

Usage with npm

1import Keyboard from "simple-keyboard";
2import inputMask from "simple-keyboard-input-mask";
3 
4// CSS
5import "simple-keyboard/build/css/index.css";
6 
7const keyboard = new Keyboard({
8  onChange: input => onChange(input),
9  onKeyPress: button => onKeyPress(button),
10  modules: [inputMask],
11  onModulesLoaded: () => {
12    console.log("Module loaded!");
13  },
14  inputMask: {
15    "default": {
16      mask: '+1 (999) 999-9999',
17      regex: /^[0-9]+$/
18    }
19  },
20});
21 
22function onChange(input) {
23  document.querySelector(".input").value = input;
24  console.log("Input changed", input);
25}
26 
27function onKeyPress(button) {
28  console.log("Button pressed", button);
29}

1<input class="input" placeholder="+1 (999) 999-9999" readonly />
2<div class="simple-keyboard"></div>

Demos: JS (angular + vue) react

Usage with CDN

1<html>
2<head>
3  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
4</head>
5 
6<body>
7  <input class="input" placeholder="+1 (999) 999-9999" readonly />
8  <div class="simple-keyboard"></div>
9 
10  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
11  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard-input-mask@latest/build/index.min.js"></script>
12  <script src="src/index.js"></script>
13</body>

1const Keyboard = window.SimpleKeyboard.default;
2const inputMask = window.SimpleKeyboardInputMask.default;
3 
4const keyboard = new Keyboard({
5  onChange: input => onChange(input),
6  onKeyPress: button => onKeyPress(button),
7  modules: [inputMask],
8  onModulesLoaded: () => {
9    console.log("Module loaded!");
10  },
11  inputMask: {
12    "default": {
13      mask: '+1 (999) 999-9999',
14      regex: /^[0-9]+$/
15    }
16  },
17});
18 
19function onChange(input) {
20  document.querySelector(".input").value = input;
21  console.log("Input changed", input);
22}
23 
24function onKeyPress(button) {
25  console.log("Button pressed", button);
26}

Demos: JS (cdn)