网页中表单按回车就自动提交的问题的解决方案
2014-11-03 00:00
573 查看
1、当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交。
再添加一个
按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:
(1)添加一个
不显示输入框,然后回车之后也不会提交:
(2)添加一个onkeydown事件,然后回车之后也不会显示:
如果想添加回车事件可以在onkeydown事件中添加判断提交表单:
我们有时候希望回车键敲在文本框(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添加背景图合适些。
<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添加背景图合适些。
相关文章推荐
- 网页中表单按回车就自动提交的问题的解决方案
- 网页中表单按回车就自动提交的问题总结
- 按回车表单自动提交问题
- IE下回车事件的表单自动提交问题
- 按回车表单自动提交问题
- 今天遇到一个问题,原来在html的form中如果只有一个type="text"的控件,如果在text中点击回车键,就是自动提交表单!
- IE和FireFox按回车自动提交表单问题解决
- form中只有一个input按回车键表单会自动提交问题
- IE/FF表单回车自动提交的问题
- IE和FireFox按回车自动提交表单问题解决
- 关于在.net中web表单 在textbox 中回车页面提交问题的解决方案
- 按回车表单自动提交问题意外发现
- form表单中只有一个input时,回车自动提交的问题解决
- 回车自动提交Form表单的问题
- 回车自动提交Form表单的问题
- 遍历当前网页表单,并自动填写提交的问题(VC++)!
- 关于表单提交与回车的问题
- 再议关于屏蔽回车自动提交的问题
- 在ASP.NET登录页面中如何实现文本框焦点自动跳转及通过回车键提交表单
- 按回车键提交表单 问题