Introduction
This article describes how to show a virtual keyboard in ASP.Net using a jQuery plugin.
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
You can download them from the source code attached in this page.
Refer to this link Mottie keyboard plugin
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>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.
![]()
Virtual Key Board with Lock/Unlock buttonYou can provide an option for the user to use either the System keyboard or the Virtual Key Board by providing a Lock/unlock button.
To do that add the following JavaScript and CSSstyle in the head tag of an aspx file.
<head id="Head1" runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<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({
// Prevents direct input in the preview window when true
lockInput: true,
preventPaste: true,
autoAccept: true,
visible: function (e, kb, el) {
if (!kb.$keyboard.find('.ui-keyboard-lock').length) {
kb.$keyboard.append('<button class="ui-keyboard-button ui-keyboard-lock ui-state-default ui-corner-all"><span class="ui-icon-locked ui-icon"></span></button>');
kb.$keyboard.find('.ui-keyboard-lock').click(function () {
var locked = !kb.options.lockInput;
kb.options.lockInput = locked;
kb.$preview
.toggleClass('ui-keyboard-lockedinput', locked)
.prop('readonly', locked);
$(this).find('span')
.toggleClass('ui-icon-locked', locked)
.toggleClass('ui-icon-unlocked', !locked);
});
}
}
})
.addTyping();
});
</script>
</head>
In the code above just check this line:
lockInput: true
It used to prevent System keyboard input in the TextBox.
Now build your application and put the focus on the TextBox. It will show the Virtual KeyBoard with a Lock Symbol.
If the Symbol is Lock then that means you are unable to input from the system keyboard.
If it's unlocked then you will able to input from the system keyboard.
![]()
![]()
Reference: https://github.com/Mottie/Keyboard/wiki
Thank you.