防止按下 Enter 键时提交表单
我有一个表单
,其中包含两个文本框、一个选择下拉菜单和一个单选按钮。 当按下enter键时,我想调用我的JavaScript函数,但是当我按下它时,form
被提交。
如何防止按下 enter 键时提交form
?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(20)
event.key === "Enter"
更新且更简洁:使用
event.key
。 不再有任意数字代码!现代风格,带有 lambda 和解构
Mozilla 文档
支持的浏览器
event.key === "Enter"
More recent and much cleaner: use
event.key
. No more arbitrary number codes!Modern style, with lambda and destructuring
Mozilla Docs
Supported Browsers
原生js(获取api)
native js (fetch api)
在您的 HTML 页面中添加此代码...它将禁用...Enter 按钮..
Add this Code In Your HTML Page...it will disable ...Enter Button..
跨浏览器解决方案
一些较旧的浏览器以非标准方式实现 keydown 事件。
which
和
keyCode
是现在已弃用,但检查这些事件并没有什么坏处,这样代码就可以为仍然使用 IE 等旧版浏览器的用户工作。isKeyPressed
函数检查按下的键是否已输入,并且event.preventDefault()
阻止表单提交。最小工作示例
JS
HTML
https:/ /jsfiddle.net/tobiobeck/z13dh5r2/
Cross Browser Solution
Some older browsers implemented keydown events in a non-standard way.
which
and
keyCode
are deprecated nowadays, but it doesn't hurt to check for these events nonetheless so that the code works for users that still use older browsers like IE.The
isKeyPressed
function checks if the pressed key was enter andevent.preventDefault()
hinders the form from submitting.Minimal working example
JS
HTML
https://jsfiddle.net/tobiobeck/z13dh5r2/
在用户定义的函数中使用
event.preventDefault()
Use
event.preventDefault()
inside user defined function我使用了文档,其中涵盖了页面加载后动态添加的 html:
添加了来自 @Bradley4 的更新
I used document on, which covers dynamically added html after page load:
Added updates from @Bradley4
有点简单
不要在按键“Enter”时发送表单:
在按键“Enter”时执行功能:
A little simple
Don't send the form on keypress "Enter":
Execute the function on keypress "Enter":
一个 jQuery 解决方案。
我来这里寻找一种方法来延迟表单提交,直到触发文本输入上的模糊事件之后。
如果能得到一个更通用的版本来触发所有延迟事件而不仅仅是表单提交,那就太好了。
A jQuery solution.
I came here looking for a way to delay the form submission until after the blur event on the text input had been fired.
Would be nice to get a more general version that fired all the delayed events rather than just the form submit.
从我的角度来看,一个更简单有效的方法应该是:
A much simpler and effective way from my perspective should be :
使用 TypeScript,并避免多次调用函数
Using TypeScript, and avoid multiples calls on the function
好的,假设您的表单中有以下文本框:
为了在按下回车键时从此文本框中运行一些“用户定义”脚本,而不是让它提交表单,这里有一些示例< /em> 代码。 请注意,此函数不执行任何错误检查,并且很可能仅在 IE 中工作。 为了正确地做到这一点,您需要一个更强大的解决方案,但您将获得总体思路。
返回函数的值将警告事件处理程序不要进一步冒泡事件,并将阻止进一步处理按键事件。
注意:
有人指出
keyCode
是 已弃用。不幸的是,现代浏览器广泛支持的受欢迎的标准
key
有一些 IE 和 Edge 中的狡猾行为。 任何早于 IE11 的版本仍然需要 polyfill。此外,虽然已弃用的警告对于
keyCode
和which
来说是相当不祥的,但删除这些警告将意味着对无数遗留网站的巨大破坏性改变。 因此,他们不太可能很快就去任何地方。Ok, so imagine you have the following textbox in a form:
In order to run some "user defined" script from this text box when the enter key is pressed, and not have it submit the form, here is some sample code. Please note that this function doesn't do any error checking and most likely will only work in IE. To do this right you need a more robust solution, but you will get the general idea.
returning the value of the function will alert the event handler not to bubble the event any further, and will prevent the keypress event from being handled further.
NOTE:
It's been pointed out that
keyCode
is now deprecated. The next best alternativewhich
has also been deprecated.Unfortunately the favored standard
key
, which is widely supported by modern browsers, has some dodgy behavior in IE and Edge. Anything older than IE11 would still need a polyfill.Furthermore, while the deprecated warning is quite ominous about
keyCode
andwhich
, removing those would represent a massive breaking change to untold numbers of legacy websites. For that reason, it is unlikely they are going anywhere anytime soon.同时使用
event.which
和event.keyCode
:Use both
event.which
andevent.keyCode
:因此,覆盖尽可能多的浏览器并面向未来的最佳解决方案可能是
So maybe the best solution to cover as many browsers as possible and be future proof would be
一个 React JS 解决方案
A react js solution
覆盖表单的
onsubmit
操作以调用您的函数并在其后添加 return false,即:Override the
onsubmit
action of the form to be a call to your function and add return false after it, ie:如果您使用的是 jQuery:
If you're using jQuery:
检测整个文档上按下的 Enter 键:
http://jsfiddle.net/umerqureshi/dcjsa08n/3/
Detect Enter key pressed on whole document:
http://jsfiddle.net/umerqureshi/dcjsa08n/3/
下面的代码将在整个页面上添加
ENTER
键的监听器。这在具有单个操作按钮(例如登录、注册、提交等)的屏幕中非常有用
。在所有浏览器上进行了测试。
Below code will add listener for
ENTER
key on entire page.This can be very useful in screens with single Action button eg Login, Register, Submit etc.
Tested on all browsers.
以下是使用 JavaScript 实现此操作的方法:
Here is how you can do it using JavaScript: