Description:
You will often see in some banking sites use of a virtual keypad in their site to enter a username and password.
That type of Virtual Keypad we can implement using the Mottie keyboard plugin of jQuery.
To create this application you need the jQuery files listed below.
- jquery.min.js
- jquery-ui.min.js
- jquery-ui.css
Plugin files:
- jquery.keyboard.js
- jquery.keyboard.extension-typing.js
- keyboard.css
Design
Add a TextBox to a page of which you want to show a keyboard when the focus is on it.
Now design your screen as in the following screen:
Or you can copy the following source code:
<body>
<form id="form1" runat="server">
<div>
Textbox with virtual key pad
<asp:TextBox ID="keyboard" runat="server" MaxLength="4"></asp:TextBox>
</div>
</form>
</body>Next add the following JavaScript and CSSstyle in the head tag of an aspx file.
<head runat="server">
<title></title>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<link href="keyboard.css" rel="stylesheet" type="text/css" />
<script src="jquery.keyboard.js" type="text/javascript"></script>
<script src="jquery.keyboard.extension-typing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#keyboard').keyboard({
preventPaste: true,
autoAccept: true
})
.addTyping();
});
</script>
</head>
<form id="form1" runat="server">
<div>
Textbox with virtual key pad
<asp:TextBox ID="keyboard" runat="server" MaxLength="4"></asp:TextBox>
</div>
</form>
</body>Next add the following JavaScript and CSSstyle in the head tag of an aspx file.
<head runat="server">
<title></title>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<link href="keyboard.css" rel="stylesheet" type="text/css" />
<script src="jquery.keyboard.js" type="text/javascript"></script>
<script src="jquery.keyboard.extension-typing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#keyboard').keyboard({
preventPaste: true,
autoAccept: true
})
.addTyping();
});
</script>
</head>
In the code above just check this line:
preventPaste: true It prevents a copy and paste on the TextBox.
Now build your application and put the focus on the TextBox. It will show the Virtual KeyBoard.
No comments:
Post a Comment