This jQuery plugin using Bootstrap v3 to generate a popover keyboard for use on touchscreen devices.
Requires jQuery and Bootstrap v3.
Note: since the keyboard listens for touch events, using this in a browser and clicking your mouse probably won't work. However, Chrome's Developer Tools has a 'device mode' that emulates touch events.
Download the latest release from GitHub.
<html> <head> ... <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="jqbtk.min.css"> </head> <body> ... <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="jqbtk.min.js"></script> </body> </html>
This is its most basic form, providing a QWERTY keyboard.
<input type="text" class="keyboard form-control" id="default">
$('#default').keyboard();
If the input type is "tel" then the keyboard will display as a telephone number pad. Alternatively you can specify type: 'tel' when initialising.
<input type="tel" class="keyboard form-control" id="telephone">
$('#telephone').keyboard();
// OR
$('#telephone').keyboard({type:'tel'});
As an alternative, add the class keyboard-numpad to reverse the number row order., or use type: 'numpad'.
<input type="tel" class="keyboard keyboard-numpad form-control" id="number">
$('#number').keyboard();
// OR
$('number').keyboard({type:'numpad'});
<input type="password" class="keyboard form-control" id="password">
$('#password').keyboard();
You can also create your own custom layouts. Each row of the layout array is a row of buttons. Each button is specified by an array pair, where you can set the lowercase and uppercase options. There are special buttons for space, shift, enter, and del; otherwise, the button adds the displayed character to the input's value.
<input type="text" class="keyboard form-control" id="custom">
$('#custom').keyboard({
layout:[
[['a','A'],['b','B'],['c','C'],['del','del']],
[['shift','shift'],['space','space']]
]
});
Set initCaps: true when instantiating the keyboard so that caps are on initially (this is useful for inputs that ask for a name, for instance). Caps will be automatically taken off after the first character.
<input type="text" class="keyboard form-control" id="initcaps">
$('#initcaps').keyboard({initCaps:true});
Sometimes you'll want to bind the keyboard to an element on your page that doesn't exist when the page first loads, and is dynamically inserted. As long as you can reference the input element at some point once it's been created, you can initialise it.
$(document).on('some-event-that-inserted-an-input',function(){
$('.keyboard').keyboard();
});
Sometimes you need to change the position of the keyboard relative to the text box. Set the placement parameter when instantiating the keyboard, using any of the valid values from the Bootstrap popover.
$('#placement').keyboard({placement:'top'});
The special key enter submits the form containing the input. With real keyboards most browsers also act this way, provided that there is a submit button. The enter key for form submission can be useful on touch displays where no real keyboard is present – especially if there is a lack of screen space for a submit button.
Matthew Dawkins is a web developer based in Somerset, UK. He loves PHP, HTML and CSS.
Follow me on Twitter: @mafu_d