登陆界面回车响应的简单实现

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
用jqury实现简单的回车响应

1. 需求

最近要实现一个登陆界面的回车响应功能，在输入账号和密码之后，按回车键就可以直接登录。试了很多种方法，有些方法不兼容，最终用jqury实现了这个功能。

2. 细节

主要用到了jqury中的keypress方法，用来监听键盘的动作。
浏览器有3种按键事件——keydown，keypress和keyup，分别对应onkeydown、onkeypress和onkeyup 3个事件句柄。

一个典型的按键会产生所有这三种事件，依次是keydown–>keypress–>keyup。

完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当按钮被按下时，发生 keydown 事件。当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。

3.代码实现

登录界面如图所示（界面做的有点丑），由一个div和3个输入框，一个登陆按钮组成。

登录界面

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
<div id=c0 class="tab-style-1">
	  
	<div id=cc>Sign In 登录</div>
			     
		<p class="validate">
			<input type="text" id="account" name="account"
			 class="form-control" placeholder="用户名/邮箱" required="" autofocus="" value=""> 		
		</p>
				 
		<p class="validate">
			<input type="password" id="password" name="password"
			type="password" class="form-control" placeholder="密码" required="" value=""> 
		</p>
				
		<table style="margin:auto">
			<tr>
				<td><input type="text" class="vcode" id="vcode" name="vcode"
					placeholder="验证码">&nbsp;&nbsp;
				</td>
				<td><img id="vcode_img" onclick="changeImage();" class="vcode"
				src="../ImageServlet.jpeg" style="cursor:pointer;">&nbsp;
				</td>
			</tr>
		</table>
			     
		<p>
			<input name="ok" id="loginok" style="height:40px;" type="submit"
			onclick="login();" value="Log In 登入">
		</p>
			     
</div>
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
.tab-style-1 {
	right: 300px;
	height: 350px;
	background-color: #648eb4;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	border: 0px #30587c solid;
	width: 300px;
	text-align: center;
}

#c0{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	 border-radius: 5px;
	-moz-box-shadow: 5px 7px 16px #33102F;
	-webkit-box-shadow: 5px 7px 16px #33102F;
	 box-shadow: -5px 7px 16px #33102F;
}

#cc {
    height: 50px;
    line-height: 50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	background-color: #77899d;
	border-bottom: 0px #30587c solid;
	font-family: 'Raleway', 'Lato', Arial, sans-serif;
	font-size: 22px;
	color: white;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 2px 1px
		rgba(0, 0, 0, 0.1);
}

.validate {
	width:100%;
	position: relative;
	overflow: hidden;
	padding-bottom: 1px;
}

.form-control {
	display: block;
	width: 70%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	background-image: none;
	border: 1px solid rgba(0, 0, 0, .075);
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
		ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	margin:0 auto;
}

input[type="submit"] {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	border: none;
	width: 75%;
	height: 55px;
	background: #69caed;
	color: #fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	margin-top:15px;
	border: 1px #648298 solid;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 2px 1px
		rgba(0, 0, 0, 0.1);
}

.vcode {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	padding-left:5px;
	width:100px;
	height:35px
}

把键盘监听的区域放在div中，在3个输入框输入后按Enter键，都会触发keypress事件。

这里的e.keyCode ? e.keyCode : e.which ? e.which : e.charCode是为了兼容性，因为不同浏览器中的属性有所不同，IE只有keyCode属性，FireFox中有which和charCode属性，Opera中有keyCode和which属性，Chrome中有keyCode、which和charCode属性。

13表示enter按键的keycode编码。常见的keycode编码还有BackSpace 8 ，Tab 9 ，Shift 16。

1
2
3
4
5
6
7
8
9
$(".tab-style-1").keypress(function (e){  
		   //var code = event.keyCode;  
		   //var code = e.keyCode || e.which || e.charCode;  
		   var code = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
		        if (13 == code) {  
		             //alert("响应键盘的enter事件");  
		             login();
		         }  
		});