JavaScript实现按回车键触发按钮提交表单

作者:小括号

时间:2026-10-24

浏览:191

本文介绍如何在Web开发中实现按回车键自动提交表单的功能。通过监听输入框的onkeydown事件,检测keyCode是否为13,并模拟调用提交按钮的click方法,从而提升用户体验,确保用户无需点击按钮即可通过回车键完成表单验证与提交。

文章目录

表单提交的两种常见方式

第一种方式是利用标准的提交按钮,在HTML表单元素中定义onsubmit事件来处理表单验证逻辑。


具体实现代码如下:

 
<script type="text/javascript">
function onSub(){
//表单验证代码
} 
</script>
<form action="" method="" onsubmit="javascript:onSub();">

第二种方式是通过button按钮或图片的onclick事件来调用表单验证函数。


相关代码示例如下:

 
<input type="button" name="button" id="button" onclick="javascript:onSub();" />
<img src="图片路径" onclick="javascript:onSub();" />

实现回车键提交功能的代码方案

然而,采用第二种方式提交表单时,用户填完内容后按回车键无法直接提交,这与使用提交按钮的体验存在差异。



为了弥补这一缺陷,只需在页面中添加特定的JavaScript代码即可实现回车提交功能。


实现代码如下:

 
function butOnClick() {
if (event.keyCode == 13) {
var button = document.getElementById("bsubmit"); //bsubmit 为botton按钮的id
button.click();
return false;
} 
} 

在表单的最后一个输入项中触发onkeydown事件,并调用butOnClick()函数即可;例如:登录程序的最后一项是密码,则



<input type="password" name="userPwd" onkeydown="javascript:butOnClick();" />



这样当你输入完密码后,按下回车键即可实现表单验证和登录操作(如果用户名和密码正确)。这是个人的一点总结,共享出来



大家齐分享!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章