How to implement Virtual keyboard concepts on asp.net website easily

Hi Friend,Today, we will learn "how to use virtual keyboard concepts on asp.net or other websites?". Nowadays ,there are many malicious "spyware" and "Trojan programs" which are harmful for our Username and password .if you use virtual keyboard on website,this will reduce the risk of password theft. If you are using banking sites from the cyber cafe ,please use virtual keyboard only otherwise your password may be compromised.In cyber cafe, may be installed key logger programs that will be risk of password theft .This programs might have infected your computers also .So that today i am going to show you "how to implement virtual keyboard concepts on asp.net websites".

Advantage of virtual keyboard:-
There are some advantages of virtual keyboard as given below:-

Virtual keyboard prevent the Username and Password from theft.
The Virtual Keyboard is designed to protect your password from malicious “Spyware” and “Trojan Programs”.
Virtual keyboard helps to safe your computer from different malicious codes.

How to implement virtual keyboard on asp.net websites:-
There are some steps to implement virtual keyboard concepts on asp.net websites as given below:-
Step 1:- First open your visual studio --> File--> New-->Website -->Select ASP.NET Empty Website-->OK--> Open Solution Explorer Window--> Add two web forms (Default.aspx ,Default2.aspx).

Step 2:- Now again open Solution Explorer Window --> Add two files (download it from below)
1.) css
2.) javascript
as shown below:-

Step 3:- Now open Default.aspx-->Go Source File --> Add following codes as given below:-


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<title>Virtual Keyboard</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <link type="text/css" href="css/jquery.keypad.css" rel="stylesheet" />  
 <script type="text/javascript" src="javascript/jquery.plugin.min.js"></script>
 <script type="text/javascript" src="javascript/jquery.keypad.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[id$='chk_Keyboard']").click(function () {
                if (!$(this).is(':checked')) {
                    $('#myUsername').keypad('destroy');
                    $('#myPassword').keypad('destroy');
                } else {
                    $('#myUsername').keypad({ keypadOnly: true, layout: $.keypad.qwertyLayout, randomiseAlphabetic: true, randomiseNumeric: true, randomiseOther: true });
                    $('#myPassword').keypad({ keypadOnly: true, layout: $.keypad.qwertyLayout, randomiseAlphabetic: true, randomiseNumeric: true, randomiseOther: true });
                }
            });
        });
        function btnSubmit_onclick() {
        }
    </script>       
</head>
<body>
    <form id="form1" runat="server">
   <div style="text-align: left; margin-top: 15px; height: 205px;">                           
       <strong><span class="style1">Enter Username :</span></strong> <input type="text" id="myUsername" /><br/>
       <strong><span class="style1">Enter Password :&nbsp; </span></strong> <input type="Password" id="myPassword"></asp:TextBox><br/>
       <strong>
      <input type="checkbox" id="chk_Keyboard" /> <span class="style2">Use Virtual Keyboard</span></strong><br/>
       <asp:Button ID="btnSubmit" runat="server" Height="37px" 
           PostBackUrl="~/Default2.aspx" Text="Submit" Width="137px" 
           style="font-weight: 700; font-size: large;background-color: #6699FF" />
    </div>
    </form>
</body>
</html>

Step 4:- Now Go Design View in your visual studio--> you will be see following output as shown below:-

Step 5:-Now open Default2.aspx --> this page will be opened when any user pressed Submit button as shown below:-

Step 6:-Now Run the Application(press F5)-->You will be see following output as shown below:-

Note:- You have to connect with internet when you are running this application(if any problem occurs with different browsers).
Step 7:- You can see complete process of virtual keyboard on asp.net website as shown on below video.

Note:-You can download whole application from below and run it on your visual studio directly.It is completely free from errors.If any problem ask .
For More...

For more customization refer this link http://keith-wood.name/keypad.html

Download whole Attached file
DOWNLOAD

How to implement Virtual keyboard concepts on asp.net website easily

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

1 comment:

How to implement Virtual keyboard concepts on asp.net website easily

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

You May Also Like...

1 comment: