网页中表单按回车就自动提交的问题的解决方案
更新时间：2014年11月03日 14:31:26 投稿：hebedich
这篇文章主要介绍了网页中表单按回车就自动提交的问题的解决方案,需要的朋友可以参考下
1、当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交。
复制代码 代码如下:
<form id="form1" action="post.php" method="post">
<input type="text" name="name" />
</form>
再添加一个
复制代码 代码如下:
<input type="text" />
按下回车将不会自动提交，但是页面上显示一个不知所云的输入框挺别扭，后从网上搜到两个解决办法：
（1）添加一个
复制代码 代码如下:
<input style="display: none;" type="text" />
不显示输入框，然后回车之后也不会提交：
复制代码 代码如下:
<form id="form1" action="post.php" method="post">
<input type="text" name="name" />
<input style="display:none" />
</form>
（2）添加一个onkeydown事件，然后回车之后也不会显示：
复制代码 代码如下:
<form id="form1" action="post.php" method="post">
<input type="text" name="name" onkeydown="if(event.keyCode==13) return false;"/>
</form>
如果想添加回车事件可以在onkeydown事件中添加判断提交表单：
复制代码 代码如下:
<form id="form1" action="post.php" method="post">
<input style="display:none" />
<input type="text" name="name" onkeydown="if(event.keyCode==13){gosubmit();}" />
</form>
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
如果表单里有一个type="submit"的按钮，回车键生效。
如果表单里只有一个type="text"的input，不管按钮是什么type，回车键生效。
如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
type="image"的input，效果等同于type="submit"，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
相关文章
文章里如果有错误的话，希望能帮忙指正~我也是边看视频边学习中，这个算是个笔记吧~自认为总结出来的东西比看视频要节省点时间~能帮到别人最好了~帮不到也起码恩能帮到我自己2012-03-03
这篇文章主要为大家详细介绍了javascript数组的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
本文是对javascript中的内存管理进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
本篇文章主要是对parentElement,srcElement的使用进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章介绍了TypeScript开发环境的安装方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了JavaScript变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家带来一篇js选择器全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
WEB页子窗口(showModalDialog和showModelessDialog)使用说明，大家可以看下。2009-10-10
做网页的一些技巧...2007-02-02
下面为自己初学JavaScript时觉得应该注意的地方(从<<JavaScript动态网页开发详解>>中学到)2008-09-09
最新评论