jQuery实现的虚拟键盘



今天的收获很大呵呵，刚刚看了这个实例，用jQuery实现的虚拟键盘。先贴个图上来看看:

 

大家也可以去官网看看：http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard

摘录教程如下：

For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Before I begin, let me show you how it will all look in the end.

Basic HTML and CSS Setup

Ok, let’s get started. We start off with a plain, old login form with username and password fields and a login button. We add a link which will show/hide the virtual keyboard when clicked.

Note: For the purpose of demonstration, I have actually used a normal text field instead of a password type text field!

1 2 3 4 5 6 7 8 9 10

<h3>Login form</h3> <form action="" method="post" id="loginform">   <label for="username">Username:</label>   <input type="text" name="username" id="username" /> <label for="pwd">Password:</label> <input type="text" name="pwd" id="pwd"/> <a href="#" id="showkeyboard" title="Type in your password using a virtual keyboard.">Keyboard</a> <br /> <input type="submit" name="Submit" id="submit_butt" value="Submit" /> </form>

Next, it’s time to put in the XHTML for the keyboard in place. I just wanted to take a very simple approach, and thus ruled out generating the keys dynamically. I have just the four main rows of the standard keyboard (each enclosed in a DIV), along with their shift equivalents. So that means, a total of 8 rows, of which at any time (depending on whether the shift key is pressed or not), four of the rows would be visible, and the other four hidden.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

<div id="keyboard"> <div id="row0"> <input name="accent" type="button" value="`" /> <input name="1" type="button" value="1" /> <input name="2" type="button" value="2" /> <input name="3" type="button" value="3" /> <input name="4" type="button" value="4" /> <input name="5" type="button" value="5" /> <input name="6" type="button" value="6" /> <input name="7" type="button" value="7" /> <input name="8" type="button" value="8" /> <input name="9" type="button" value="9" /> <input name="0" type="button" value="0" /> <input name=" - " type="button" value=" - " /> <input name="=" type="button" value="=" /> <input name="backspace" type="button" value="Backspace" /> </div> <div id="row0_shift"> <input name="tilde" type="button" value="~" /> <input name="exc" type="button" value="!" /> <input name="at" type="button" value="@" /> <input name="hash" type="button" value="#" /> <input name="dollar" type="button" value="$" /> <input name="percent"