登陆界面的tab和enter键融合使用

最新推荐文章于 2023-12-12 16:42:03 发布

xclsky1120

最新推荐文章于 2023-12-12 16:42:03 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yumolan4325/article/details/78999375

本文介绍如何使用JavaScript实现用户在输入框中按下Enter键时触发Tab键行为，并结合提交按钮实现快速登录的功能。通过监听onkeydown事件并设置keyCode，使用户体验更加流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 js中可以通过window.event.keyCode来得到按下的键盘值。 tab的keyCode为9。enter的keyCode为13
如：function nextBtn(){
alert(window.event.keyCode);
}

2 有一个事件是记录按下键盘的事件。就是onkeydown事件，用来记录按下键盘的事件。
如：<input type="text" id="name" name="name" onkeydown="nextBtn()" value=""/>

js：用来判断如果是回车的话，设置为tab键。这样就能一致使用enter键来输入。
function nextBtn(){

if(window.event.keyCode==13){//如果是回车
window.event.keyCode=9;//改为tab
}
}

3 登陆按钮如果想要通过enter键也能达到点击效果的话，可以将按钮类型设置为submit。这样当为tab键触碰时也能出发submit操作。此时的action需要在form中进行设置。form的action属性
如：<input type="submit" id="btn2" value="登陆"/>

综上所述，1 首选设置按下键盘时间，2 设置回车时改为tab键。3 按钮类型为submit。三者结合起来就行达到一直通过输入enter就能从输入账号开始，一直到登陆操作也能完成。

完整的例子：
<script type="text/javascript" language="javascript">
function nextBtn(){
//alert(window.event.keyCode);
if(window.event.keyCode==13){//如果是回车
window.event.keyCode=9;//改为tab
}
}
</script>
<body>
<form name="form1" action="login!loginUser" method="post">
<table id="t1" class="table_class">
<tr>
<td>姓名</td>
<td>
<input type="text" id="name" name="name" onkeydown="nextBtn()" value=""/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" id="password" name="password" value=""/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="btn2" value="aaa"/>
</td>
</tr>
</table>
</form>
</body>