A touch keyboard using Bootstrap with jQuery: 5 demos

The touch keyboard for Bootstrap

In this tutorial, a jQuery plug-in is used for creating the keyboard of different types like a general QWERTY keyboard, for entering telephone, passwords etc. for the touch screen devices like smart phones.

In order to implement that in your website, you need jQuery and Bootstrap version 3+. The plug-in uses Bootstrap’s popover component where different buttons are added for creating the specific keyboard.

Note, the plug-in works with the touch events so it may not work with the mouse click. It is recommended to use for only mobile devices that have touch screens.

A demo of creating and setting up touch keyboard

In this example, as you click inside the textbox, the QWERTY keyboard with default settings will appear. No matter if you are using a desktop or smart phone with touchpad, the keyboard will display. However, you may only use it in touchpad devices. The typed letters or numbers will be assigned to the text field. Have a look:

Bootstrap touchpad keyboard

See online demo and code

The minimum code is used for creating this keyboard with default settings. In order to use this in your project, first of all include the Bootstrap and plug-in’s CSS files in the <head> section:

   <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”css/jqbtk/jqbtk.min.css”>

After that, use the markup where you need to create a textbox field with certain Bootstrap and plug-in’s .keyboard class.

Above the </body> tag, place the JS files of Bootstrap, jQuery and plug-in (plug-in download link):

 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>

<script src=”js/jqbtk/jqbtk.min.js”></script>

Finally, call the keyboard method of the plug-in for initiating the default keyboard.

A demo for entering telephone number keypad

In this demo, as you click the textbox, the keyboard for entering the telephone number will display. For creating the telephone pad, you simply need to specify the “tel” as input type while other code remains the same:

Bootstrap telephone keypad

See online demo and code

In the code, you can see the only difference is in the markup section where “tel” is used:

 

The script remains the same, I just changed the id:

 

A demo of password input keyboard

For enabling users entering or creating the password, you simply need to change the input type of the textbox to “password” and rest remains the same. The characters or numbers will appear as *** just like ordinary password fields. Click the links below to have a look at demo:

jQuery keyboard password

See online demo and code

Only the markup is changed, which is:

 

The <script>

 

An example of displaying keyboard with initial caps

You may display the keyboard with capital letters initially by using the initCaps option as true in the jQuery code section. See the demo and complete code:

jQuery keyboard initial caps

See online demo and code

The markup:

 

The script:

 

Changing the style of keyboard by CSS demo

As mentioned earlier, the downloaded package of the plug-in also contains a CSS file that defines the layout and style of the keyboard. In the above demos, I have used the minified version of CSS file. In this demo, for changing the color and some other properties of the keyboard keys, I used the jqbtk.css rather its minified version.

See the demo online with a few properties changed or added:

jQuery keyboard customized CSS

See online demo and code

Notice in the <head> section, the CSS file reference:

<link rel=”stylesheet” href=”css/jqbtk/jqbtk.css”>

In this CSS file, I have added and changed a few properties that define the keys of the keyboard:

 

You may get the CSS file by view source and open the file in your browser.