Simple jQuery Virtual Keyboard For Input Fields

Simple jQuery Virtual Keyboard For Input Fields
File Size: 76.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A minimal jQuery plugin used to create an on-screen virtual keyboard which will popup when you click on the keyboard icon inside a specified input field.

See also:

How to use it:

1. Load the jQuery VirtualKeyboard plugin's stylesheet in the header, and the jquery.virtualKeyboard.js in the footer.

<link rel="stylesheet" href="jquery.virtualKeyboard.css">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.virtualKeyboard.js"></script>

2. Add the CSS class 'virtualKeyboard' to an input field where you wish to append a visual keyboard to.

<input type="text" class="virtualKeyboard" placeholder="...">

3. Call the function and the plugin will automatically add a keyboard icon to the indicated input field.

$('.virtualKeyboard').vkb();

4. Plugin options to custom the styles & keyboard icon.

$('.virtualKeyboard').vkb({

// default CSS classes
styleClassParentInput: 'vkb-css-parent-input',
styleClassKeyboardIcon: 'vkb-css-keyboard-icon',

// keyboard icon
srcKeyboardIcon: 'images/keyboard.gif'

});

This awesome jQuery plugin is developed by Burhanov. For more Advanced Usages, please check the demo page or visit the official website.