Mobile-first Virtual Keyboard Plugin With jQuery And Bootstrap - jQBTK

File Size: 20 KB
Views Total: 13900
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile-first Virtual Keyboard Plugin With jQuery And Bootstrap - jQBTK

jQBTK (jQuery Bootstrap Touch Keyboard) is a jQuery plugin for creating customizable on-screen virtual keyboards & numpads on mobile touch devices. The plugin listens for touch events and displays a virtual keyboard in the Bootstrap popover component when an input field is tapped or gets focused. Only works on touch devices.

How to use it:

1. The plugin requires jQuery library and Bootstrap framework loaded properly in the document.

<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. Load the jQuery jQBTK plugin's JavaScript and CSS files.

<link rel="stylesheet" href="jqbtk.min.css">
<script src="jqbtk.min.js"></script>

3. Call the function to attach the corresponding virtual keyboard to your input field based on the input type like text, password, telephone, etc.

<input type="text" class="keyboard" id="basic">
<input type="tel" class="keyboard" id="telephone">
<input type="password" class="keyboard" id="password">

4. You can also specify the keyboard type in the JavaScript like this:

  type:false, // numpad or tel

5. Customize the keyboard layout.




6. More customization options.

btnTpl:'<button type="button">',
btnClasses:'btn btn-default',
btnActiveClasses:'active btn-primary',
placement:'bottom' // change the position of the keyboard relative to the text box



  • added click event handling, also added inline functionality


  • Fixed formatting style


  • Add enter button for custom layouts to submit form


  • Added ability to specify the placement of the keyboard relative to the parent element

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