请选择 进入手机版 | 继续访问电脑版

我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

html网页如何通过jQuery禁用表单Enter提交

在有表单提交的html网页,想要的效果是输入内容后,点击提交按钮上传内容并保存。但是某项内容输入后,按键盘enter键自动触发了按提交按钮的功能。本文在此分享解决方法。
背景:小编开发了一个html网页,提供了输入内容后,点击保存的功能。其中输入项有个项目,输入用户id后可以自动获取用户名和其他信息。用户在使用中,输入id后习惯性按enter触发获取用户名等信息的过程。但是这导致数据在不完整的情况下,进行了提交和保存。

需求:想要取消键盘按enter自动触发表单提交的功能,仅使用 “鼠标点击”提交按钮进行表单信息上传。

方法:首先,我们需要选择表单。在Jquery中用查询选择器完成,可以通过id或class选择比如:$(“#form-id”)。 完成表单选择后,需要处理表单的提交过程。由于我们需要用户是否按下了回车键,我们在每个按键事件上添加一个事件监听器:on(“keypress”, function (event) {} )

这个事件处理程序将检查每一次的键盘按压,所以我们要求对 “enter “键进行检查。为了达到这个目的,我们可以使用event.keyCode或event.which.Default。

event.keyCode: “keyCode “属性返回触发按键事件的Unicode字符代码。
event.which: “which “属性返回该事件所按下的键盘键(或鼠标键)。

现在,我们知道回车键被按下,我们需要停止默认行为。为了达到这个目的,我们包括对jQuery方法preventDefault()的调用,以停止事件的传播。 preventDefault()

preventDefault():如果事件是可取消的,该方法将取消该事件,这意味着属于该事件的默认动作将不会发生。

html网页如何通过jQuery禁用表单Enter提交

html网页如何通过jQuery禁用表单Enter提交



点击阅读更多内容!
如果您觉得文章内容帮助到了您,不妨点点感兴趣的广告。感谢您的支持!

微信扫一扫打赏

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-4-23 12:29 , Processed in 0.072987 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表