How to implement Virtual keyboard concepts on website easily

Hi Friend,Today, we will learn "how to use virtual keyboard concepts on 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 websites".

Advantage of virtual keyboard:-
There are some advantages of virtual keyboard as given below:-
  1. Virtual keyboard prevent the Username and Password from theft.
  2. The Virtual Keyboard is designed to protect your password from malicious “Spyware” and “Trojan Programs”.
  3.  Virtual keyboard helps to safe your computer from different malicious codes.
How to implement virtual keyboard on websites:-
There are some steps to implement virtual keyboard concepts on 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" "">

<html xmlns="">
<title>Virtual Keyboard</title>
<script type="text/javascript" src=""></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')) {
                } 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() {
    <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/>
      <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" />

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 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...
  1. How to make complete and secure login page in
  2. Learn .NET Complete Interview Questions and Answers.
  3. Create setup file with database
  4. Learn complete OOPS Concepts in c#
  5. Learn C# Concepts completely with real examples
For more customization refer this link 
      Download whole Attached file

1 comment:

  1. Very good job.....

    How i can put and Greek Language



Powered by Blogger.