Pages

19 Aug 2013

Asp.net, Jquery, HTML- Online virtual keyboard with jquery

<script type="text/javascript">
   $(document).ready(function() {
       $('#remember').live('click', function() {
           $('#txtkeyboard').focus(function() {
               $(this).addClass("focus");
               $('#txtpassword').removeClass("focus");
           });

           $('#txtpassword').focus(function() {
               $(this).addClass("focus");
               $('#txtkeyboard').removeClass("focus");
           });

           var isChecked = $('#remember:checked').val() ? true : false;

           if (isChecked == true) {
               var count = $('#tblkeyboard').find('tr td').length;
               $('#tblkeyboard').css("font-weight", "bold");
               $('#tblkeyboard tr td').click(function() {
                   var username = $(this).text().trim();
                   if (username == 'CLEAR') {
                       $('#txtkeyboard').val('');
                       $('#txtpassword').val('');
                       return;
                   }
                   else if (username == 'CAPS LOCK') {
                       for (i = 0; i < count; i++) {
                           var ss = $('#tblkeyboard').find('td:eq(' + i + ')').text();
                           if (i == 65 || i == 66) { return; }
                           var iscap = false;
                           if (/[a-zA-Z]/.test(ss) == true) {
                               var uppercase = new RegExp('[A-Z]');
                               var lowercase = new RegExp('[a-z]');
                               if (ss.match(uppercase)) {
                                   iscap = true;
                               }
                               if (ss.match(lowercase)) {
                                   iscap = false;
                               }
                               if (iscap == false) {
                                   $('#tblkeyboard').find('td:eq(' + i + ')').text(ss.toUpperCase());
                               }
                               if (iscap == true) {
                                   $('#tblkeyboard').find('td:eq(' + i + ')').text(ss.toLowerCase());
                               }
                           }
                       }

                   }
                   else {
                       var focused = $('.focus').attr("id");
                       //alert(focused);
                       var a = $('#' + focused).val();
                       //alert(a + '   ' + username);
                       $('#' + focused).val(a + username);
                   }
               });
           } else { location.reload(true); return; }
       })
   })
 
</script>

HTML Script

<div class="row-fluid" align="center">
<div class="well span5 left login-box">
<div class="alert alert-info">
Please login with your Username and Password.
</div>
<div class="form-horizontal" >
<fieldset>
<div class="input-prepend" title="Username" data-rel="tooltip">
<span class="add-on"><i class="icon-user"></i></span>

                                <asp:TextBox ID="txtkeyboard" class="input-large span10" Text="admin"
                                    runat="server" Width="300px">admin</asp:TextBox>
</div>
<div class="clearfix"></div>

<div class="input-prepend" title="Password" data-rel="tooltip">
<span class="add-on"><i class="icon-lock"></i></span>

<asp:TextBox ID="txtpassword" class="input-large span10" Text="admin123456"
                                    runat="server" TextMode="Password" Width="300px"></asp:TextBox>
</div>
<div class="clearfix"></div>

<div class="input-prepend">
<label class="remember" for="remember"><input type="checkbox" id="remember" />Enable Virtual Keyboard</label
</div>
<div class="clearfix"></div>

<p class="center span5">

                            <asp:Button ID="btnLogin" class="btn btn-primary" runat="server" Text="Login"
                                    Width="80px" onclick="btnLogin_Click" />
</p>
</fieldset>

</div>
</div><!--/span-->
<div class="well span5 left login-box">
   <div class="alert alert-info">
Online Virtual Keyboard
</div>
<table id="tblkeyboard" class="style1">
                <tr>
                    <td >
                        ~</td>
                    <td>
                        !</td>
                    <td>
                        @</td>
                    <td>
                        #</td>
                    <td>
                        $</td>
                    <td>
                        %</td>
                    <td>
                        ^</td>
                    <td>
                        &amp;</td>
                    <td>
                        *</td>
                    <td>
                        (</td>
                    <td>
                        )</td>
                    <td>
                        _</td>
                    <td>
                        +</td>
                </tr>
                <tr>
                    <td>
                        `</td>
                    <td>
                        1</td>
                    <td>
                        2</td>
                    <td>
                        3</td>
                    <td>
                        4</td>
                    <td>
                        5</td>
                    <td>
                        6</td>
                    <td>
                        7</td>
                    <td>
                        8</td>
                    <td>
                        9</td>
                    <td>
                        0</td>
                    <td>
                        -</td>
                    <td>
                        =</td>
                </tr>
                <tr>
                    <td>
                        q</td>
                    <td>
                        w</td>
                    <td>
                        e</td>
                    <td>
                        r</td>
                    <td>
                        t</td>
                    <td>
                        y</td>
                    <td>
                        u</td>
                    <td>
                        i</td>
                    <td>
                        o</td>
                    <td>
                        p</td>
                    <td>
                        {</td>
                    <td>
                        }</td>
                    <td>
                        |</td>
                </tr>
                <tr>
                    <td>
                        a</td>
                    <td>
                        s</td>
                    <td>
                        d</td>
                    <td>
                        f</td>
                    <td>
                        g</td>
                    <td>
                        h</td>
                    <td>
                        j</td>
                    <td>
                        k</td>
                    <td>
                        l</td>
                    <td>
                        [</td>
                    <td>
                        ]</td>
                    <td>
                        \</td>
                    <td>
                        /</td>
                </tr>
                <tr>
                    <td>
                        z</td>
                    <td>
                        x</td>
                    <td>
                        c</td>
                    <td>
                        v</td>
                    <td>
                        b</td>
                    <td>
                        n</td>
                    <td>
                        m</td>
                    <td>
                        &lt;</td>
                    <td>
                        &gt;</td>
                    <td>
                        ;</td>
                    <td>
                        :</td>
                    <td>
                        &#39;</td>
                    <td>
                        &quot;</td>
                </tr>
                <tr>
                    <td colspan="5">
                    CAPS LOCK </td>
                    <td colspan="5">
                       CLEAR</td>
                    <td>
                        ,</td>
                    <td>
                        ?</td>
                    <td>
                        .</td>
                </tr>
            </table>
</div>
</div>



1 comment: