Custom Virtual Keyboard For Text Fields

Category: Form , Javascript | December 4, 2017
Author: stephen31
Views Total: 62
Official Page: Go to website
Last Update: December 4, 2017
License: MIT

Preview:

Custom Virtual Keyboard For Text Fields

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>

Leave a Reply