Tuesday, March 5, 2013

JQuery - UI Keyboard Plugin

In this article i will explain you how to use JQuery UI Keyboard plugin in ASP.net project Using UI JQuery Plugin.

 Step 1
Download UI JQuery Plugin from the following Link
JQuery UI 1.10.1


Step 2
Download UI Keyboard Plugin from the following Link
UI Keyboard Plugin

Step 3
Create a Web Application and give the solution name as SolUIKeyboardPlugin_Jquery

 Step 4
Add CSS and Script files which we downloaded from Above Link,it is look like this

 CSS

 SCRIPT

Click on Image for better View

 Step 5
Add two Textbox Control in page,it is look like this
<table border="1" cellpadding="5" cellspacing="5" align="center" width="70%">
                <tr>
                    <td style="width:25%">Alpha Numeric Pad</td>
                    <td style="width:45%">
                        <asp:TextBox ID="txtAlphaNumPad" runat="server" Width="250px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="width:25%">Num Pad</td>
                    <td style="width:45%">
                        <asp:TextBox ID="txtNumPad" runat="server" Width="100px"></asp:TextBox>
                    </td>
                </tr>
            </table>




Click on Image for better View

 Step 6
Add CSS,JQuery and UI Jquery file Reference inside the head tag of the page,it is look like this
<%-- Jquery CSS --%>
    <link type="text/css" href="css/ui-darkness/jquery-ui-1.10.1.custom.css" rel="stylesheet" rev="Stylesheet"/> 

   <%-- Jquery Plugins--%>
    <script language="javascript" type="text/javascript" src="Script/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript" src="Script/jquery-ui-1.10.1.custom.js"></script>

Step 7
Add UI Keyboard CSS and Jquery file Reference inside the head tag of the page,it is look like this
<%-- UI Keyboard CSS--%>
    <link type="text/css" href="css/keyboard.css" rel="Stylesheet" rev="Stylesheet" />

    <%--UI Keyboad plugins--%>
    <script language="javascript" type="text/javascript" src="Script/jquery.keyboard.js"></script>
    <script language="javascript" type="text/javascript" src="Script/jquery.keyboard.extension-typing.js"></script>

Step 8
Add a below script inside the head tag.it is look like this
<script language="javascript" type="text/javascript">

        $(document).ready(function () {

            try
            {
                // Alpha Numeric Pad

                $("#txtAlphaNumPad").keyboard({
                    autoAccept: true
                }).addTyping();

                // Num Pad

                $("#txtNumPad").keyboard({
                    layout: 'num',
                    restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in 
                    preventPaste: true,  // prevent ctrl-v and right click 
                    autoAccept: true
                }).addTyping();

            }
            catch (E)
            {
                alert(E.message);
            }

        });


    </script>

Here I had written code to show keyboard for one textbox and numberpad for another textbox.

 Run the Project.

 Demo


Full Code of .ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery - UI Keyboard</title>

     <%-- Jquery CSS --%>
    <link type="text/css" href="css/ui-darkness/jquery-ui-1.10.1.custom.css" rel="stylesheet" rev="Stylesheet"/> 

   <%-- Jquery Plugins--%>
    <script language="javascript" type="text/javascript" src="Script/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript" src="Script/jquery-ui-1.10.1.custom.js"></script>

   <%-- UI Keyboard CSS--%>
    <link type="text/css" href="css/keyboard.css" rel="Stylesheet" rev="Stylesheet" />

    <%--UI Keyboad plugins--%>
    <script language="javascript" type="text/javascript" src="Script/jquery.keyboard.js"></script>
    <script language="javascript" type="text/javascript" src="Script/jquery.keyboard.extension-typing.js"></script>


    <script language="javascript" type="text/javascript">

        $(document).ready(function () {

            try
            {
                // Alpha Numeric Pad

                $("#txtAlphaNumPad").keyboard({
                    autoAccept: true
                }).addTyping();

                // Num Pad

                $("#txtNumPad").keyboard({
                    layout: 'num',
                    restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in 
                    preventPaste: true,  // prevent ctrl-v and right click 
                    autoAccept: true
                }).addTyping();

            }
            catch (E)
            {
                alert(E.message);
            }

        });


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
            <table border="1" cellpadding="5" cellspacing="5" align="center" width="70%">
                <tr>
                    <td style="width:25%">Alpha Numeric Pad</td>
                    <td style="width:45%">
                        <asp:TextBox ID="txtAlphaNumPad" runat="server" Width="250px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="width:25%">Num Pad</td>
                    <td style="width:45%">
                        <asp:TextBox ID="txtNumPad" runat="server" Width="100px"></asp:TextBox>
                    </td>
                </tr>
            </table>
    </div>
    </form>
</body>
</html>


Output


Click on Image for better View

Download
Download Source Code
Posted by

5 comments:

Subscribe to: Post Comments (Atom)