This time I will share jQuery Plugin and tutorial about Mobile-first Virtual Keyboard Plugin With jQuery And Bootstrap – jQBTK, hope it will help you in programming stack.
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.
1 |
< link rel = "stylesheet" href = "/path/to/bootstrap.min.css" > |
2 |
< script src = "/path/to/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/bootstrap.min.js" ></ script > |
2. Load the jQuery jQBTK plugin’s JavaScript and CSS files.
1 |
< link rel = "stylesheet" href = "jqbtk.min.css" > |
2 |
< 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.
1 |
< input type = "text" class = "keyboard" id = "basic" > |
2 |
< input type = "tel" class = "keyboard" id = "telephone" > |
3 |
< input type = "password" class = "keyboard" id = "password" > |
1 |
$( '#selector' ).keyboard(); |
4. You can also specify the keyboard type in the JavaScript like this:
1 |
$( '#selector' ).keyboard({ |
5. Customize the keyboard layout.
02 |
[[ '1' , '1' ],[ '2' , '2' ],[ '3' , '3' ],[ '4' , '4' ],[ '5' , '5' ],[ '6' , '6' ],[ '7' , '7' ],[ '8' , '8' ],[ '9' , '9' ],[ '0' , '0' ],[ 'del' , 'del' ]], |
03 |
[[ 'q' , 'Q' ],[ 'w' , 'W' ],[ 'e' , 'E' ],[ 'r' , 'R' ],[ 't' , 'T' ],[ 'y' , 'Y' ],[ 'u' , 'U' ],[ 'i' , 'I' ],[ 'o' , 'O' ],[ 'p' , 'P' ],[ '-' , '=' ],[ '_' , '+' ]], |
04 |
[[ 'a' , 'A' ],[ 's' , 'S' ],[ 'd' , 'D' ],[ 'f' , 'F' ],[ 'g' , 'G' ],[ 'h' , 'H' ],[ 'j' , 'J' ],[ 'k' , 'K' ],[ 'l' , 'L' ],[ ''' , ':' ],[ '@' , ';' ],[ '#' , '~' ]], |
05 |
[[ 'z' , 'Z' ],[ 'x' , 'X' ],[ 'c' , 'C' ],[ 'v' , 'V' ],[ 'b' , 'B' ],[ 'n' , 'N' ],[ 'm' , 'M' ],[ ',' , ',' ],[ '.' , '.' ],[ '?' , '!' ]], |
06 |
[[ 'shift' , 'shift' ],[ 'space' , 'space' ],[ 'shift' , 'shift' ]] |
6. More customization options.
3 |
btnTpl: '<button type="button">' , |
4 |
btnClasses: 'btn btn-default' , |
5 |
btnActiveClasses: 'active btn-primary' , |
Changelog:
2017-05-15
- added click event handling, also added inline functionality
2017-01-17
2016-11-22
- Add enter button for custom layouts to submit form
2016-07-22
- 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.