Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery UI Virtual Keyboard Plugin Example

Jan 22, 2013
Introduction

Here I will explain jQuery UI virtual keyboard plugin example in asp.net and uses of virtual keyboard using jQuery UI plugin example.

Description:
  
In previous articles I explained integrate Facebook login authentication, integrate twitter login authentication, jQuery randomly change color of div and many articles relating to
jQuery, asp.net. Now I will explain how to implement virtual keyboard using jQuery UI Library in asp.net

Generally in banking sites we will see virtual keyboard by using that we can enter text in required fields. We can implement this kind of virtual keyboard by using Mottie keyboard plugin

This plugin will provide features like 

1) An on-screen virtual keyboard embedded within the browser window which will popup when a specified entry field is focused.
2) The user can then type and preview their input before Accepting or Canceling.
3) Add custom keyboard layouts easily.
4) Add up to four standard key sets to each layout that use the shift and alt keys (default, shift, alt and alt-shift).
5) Add any number of optional modifier keys (meta keys) to add more key sets.
6) Each meta key set also includes the shift, alt and alt-shift keysets - New in version 1.8.9.
7) Position the keyboard in any location around the element, or target another element on the page.
8) Easily modify the key text to any language or symbol.
9) Allow direct input or lock the preview window.

For more detail features check this site Mottie keyboard plugin

To use Mottie keyboard plugin we need to write the code like as shown below

<script type="text/javascript">
$(document).ready(function () {
$('#txtkeyboard').keyboard()
});
</script>
If you want to see it in complete example we need to write code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Virtual Keyboard Example</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="css/keyboard.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.keyboard.js"></script>
<script src="js/jquery.keyboard.extension-typing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txtkeyboard').keyboard({
autoAccept:true
})
.addTyping();
$('#txtNumkeyboard').keyboard({
layout: 'num',
restrictInput: true,
preventPaste: true,
autoAccept: true
})
.addTyping();
});
</script>
</head>
<body>
<table>
<tr>
<td><b>Keyboard Text:</b></td><td> <input type="text" id="txtkeyboard" /></td>
</tr>
<tr>
<td><b>Numberpad Text:</b></td>
<td><input type="text" id="txtNumkeyboard" /></td>
</tr>
</table>
</body>
</html>
If you observe above code I added some of script files in header section by using those files we can implement keyboard functionality for required controls. Here I had written code to show keyboard for one textbox and numberpad for another textbox. If you want code files you can get from attached folder or you can get it from this site Mottie keyboard plugin
 
Demo

Download Sample Code Attached 






For live demo and for more information about this plugin check this Virtual Keyboard Demo

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

11 comments :

Ritesh said...

Nice one sir

Anonymous said...

hi ,,, good work ,, please help me >
my problem is : how to insert HTML editor in asp.net (vb) page .. and this "HTML editor" must has a image and file upload plugin from desktop.

HARRY said...

Good one sir...

Maruthi Ram said...

Thanks sir...very very useful..but it could be more helpful if u give example for a login page such as loginId and password...plzzz give this

sab solutions said...

hii suresh,
can u please help me that when an user registers with me i need to send a messege to him through mobile regarding ui,password

Umesh Shrivastava said...

Nice one for financial domain.

Umesh Shrivastava said...

Nice one for financial domain.

L CHANDU said...

nice job sir

L CHANDU said...

nice job sir

Anonymous said...

I try it bt it not working properly so please can u explain step by step????

Sudha Karan said...

Thanks Sir ...It's Very usefull for all beginners Developer..

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.