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

这篇博客讲述了如何通过jQuery实现登录界面的回车响应功能。主要利用keypress事件监听键盘动作,区别于keydown和keyup事件,keypress会在每个字符输入时触发。文中提到由于不同浏览器属性差异,使用e.keyCode ? e.keyCode : e.which ? e.which : e.charCode来确保兼容性,并且展示了当keycode为13(回车键)时触发登录操作的代码实现。
摘要由CSDN通过智能技术生成

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个输入框,一个登陆按钮组成。

登录界面

<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=
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值