jQuery Bootstrap Touch Keyboard (jQBTK)

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

Download the latest release from GitHub.

Installation

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

Default settings

This is its most basic form, providing a QWERTY keyboard.

<input type="text" class="keyboard form-control" id="default">
$('#default').keyboard();

Telephone number input

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'});

Number input

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'});

Password input

<input type="password" class="keyboard form-control" id="password">
$('#password').keyboard();

Custom layout

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 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']]
	]
});

Initial caps

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});

Temporary parents

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();
});

About the author

Matthew Dawkins is a web developer based in Somerset, UK. He loves PHP, HTML and CSS.

www.matthewdawkins.co.uk

Follow me on Twitter: @mafu_d