Custom Virtual Keyboard For Text Fields

Preview:

Description:

Yet another on-screen virtual keyboard plugin for text fields (input and textarea), built in pure JavaScript.

Install & Import:

# Yarn
$ yarn add virtual-keyboard-plugin
# NPM
$ npm install virtual-keyboard-plugin --save

import VirtualKeyboard from 'virtual-keyboard-plugin';
const virtualkeyboardintance = new VirtualKeyboard().launchVirtualKeyboard();

How to use it:

Import the Virtual Keyboard’s JavaScript and Stylesheet into the document.

<link rel="stylesheet" href="virtual-keyboard.css">
<script src="virtual-keyboard.min.js"></script>

Add the ‘virtual-keyboard’ attribute to target text fields as follows:

<input id="demo" type="text" virtual-keyboard>
<textarea id="demo" virtual-keyboard></textarea>

Create a trigger element to toggle the virtual keyboard when needed.

<div class="virtual-keyboard-hook" 
     data-target-id="demo">
     Click Me
</div>

Set the keyboard mapping whatever you like.

<div class="virtual-keyboard-hook" 
     data-target-id="demo"
     data-keyboard-mapping="qwerty">
     Click Me
</div>
<div class="virtual-keyboard-hook" 
     data-target-id="demo"
     data-keyboard-mapping="azerty">
     Click Me
</div>

Changelog:

v1.2.1 (10/19/2018)

• [Bug] Fixing delete of multiple selected characters + Improving size of the library