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.
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
|
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
|
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 Email
|
|||
16 comments :
Nice one sir
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.
Good one sir...
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
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
Nice one for financial domain.
Nice one for financial domain.
nice job sir
nice job sir
I try it bt it not working properly so please can u explain step by step????
Thanks Sir ...It's Very usefull for all beginners Developer..
thank you very much.. very helpful... but it is not working inside login control.. outside it working...
how to place that virtual keyboard at on fixed place.( like in div )
Its very nice one.
thanks
Its Simple and very nice..Thank you Suresh Dasari
Hi how can i use Odia Language in virtual key board
Note: Only a member of this blog may post a comment.