Customizable Virtual Keyboard With jQuery And Bootstrap

File Size: 15 KB
Views Total: 16433
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Virtual Keyboard With jQuery And Bootstrap

A jQuery / Bootstrap jQuery plugin used for creating a customizable, animated virtual keyboard that comes with 3 themes and 5 languages. Not only text fields, you can trigger the virtual keyboard via any elements like buttons.

How to use it:

1. The plugin requires jQuery library and Bootstrap framework loaded correctly in the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Download and load the jQuery virtual_keyboard.js plugin's files in the webpage.

<link href="jquery.virtual_keyboard.css" rel="stylesheet">
<script src="jquery.virtual_keyboard.js"></script>

3. Call the plugin on the text fields where you want to append the virtual keyboard to.


4. Customize the virtual keyboard with the following options. These default options can be passed as an object during init.


  // Keyboard Type
  type: 'gatekeeper',  

  // default, monokai, orange
  theme: 'default',  

  // ru_RU, es_ES, pt_PT, it_IT
  language: 'en_US', 

  // active Shift key
  active_shift: false,

  // action Capslock key
  active_caps: false,

  // hide the keyboard on page load
  is_hidden: true, 

  // animation speed in ms
  open_speed: 300, 
  close_speed: 300,

  // show on focus
  show_on_focus_in: true,

  // auto hide when the text field has lost focus.
  hide_on_focus_out: true,

  // Id selector to trigger the keyboard
  trigger: undefined,  

  // enable the plugin
  enabled: true

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