jQuery Virtual keyboard with Qwerty layout




The free Virtual Keyboard Widget is an on-screen virtual keyboard embedded within the browser window which will popup when a specified input field is focused. The user can then type and preview their input before Accepting or Canceling

You can download the plugin over here. This plugin uses the jQuery UI library.

Here’s a simple example of using the on-screen virtual Keyboard with the Qwerty layout (default), which pops up when a specified input field is focused, in our case the password field.

image

OUTPUT

image

You can also specify options like showing only a Numeric keypad instead of showing the entire keypad.

image

image

Check the list of different options and how to create a custom layout of your own over here at http://snipplr.com/view/21577/virtual-keyboard-widget/

Here’s the complete code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>jQuery Qwerty Keyboard (from DevCurry.com)</title>
<
link type="text/css" rel="Stylesheet"
href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/
smoothness/jquery-ui.css" />
<
style type="text/css">
.ui-keyboard{padding: .3em; position: absolute; z-index: 16000;}
.ui-keyboard-button{height: 2em; width: 2em; margin: .1em;}
.ui-keyboard-actionkey{width: 4em;}
.ui-keyboard-space{width: 15em;}
.ui-keyboard-preview{width: 100%; text-align: left;}
</style>
<
script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</
script>
<
script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js">
</
script>
<
script src="jquery.keyboard.js" type="text/javascript">
</
script>

<
script type="text/javascript">
$(function () {
$('input[type=password]').keyboard({
layout: "num"
});
});
</script>
</
head>
<
body>
<
input id="txtPass" type="password" />
</
body>
</
html>

As you can see, this is a nice lightweight plugin which makes it very simple to integrate an on-screen virtual keyboard in your applications.

See a Live Demo



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

5 Responses to "jQuery Virtual keyboard with Qwerty layout"
  1. Anonymous said...
    December 13, 2010 at 7:24 AM

    Thanks!

    I find IE8 bug. When I take second and the third input or more, the virtual keyboard panel position slide down.
    Firefox works perfect.

  2. Anonymous said...
    January 19, 2011 at 11:29 AM

    It's possible to use this and also a physical keyboard?

    This is, using the this virtual keyboard and the normal keyboard to input the data?

    Thanks

  3. Anonymous said...
    October 13, 2011 at 7:57 AM

    The sliding down issue still continues... Is there no solution still?

  4. Mils said...
    January 25, 2013 at 9:30 AM

    Thanks for this library.

    I used your virtual keyboard in my page web, but I have many text fields, so I need to wait more than 10 seconds to load the page.

    This is an example: http://jsfiddle.net/TUAHC/22/

    What's I need to do please.

    Thank you.

  5. Mils said...
    January 25, 2013 at 9:32 AM

    Thanks for this library.

    I used your virtual keyboard in my page web, but I have many text fields, so I need to wait more than 10 seconds to load the page.

    This is an example: http://jsfiddle.net/TUAHC/22/

    What's I need to do please.

    Thank you.

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions