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.

$('textarea,input').keyboard();

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

$('textarea,input').keyboard({

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