Simple jQuery Virtual Keyboard For Input Fields

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

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="//"></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.


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


// 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.