在实际项目中,很多情况下,会需要敲击回车来提交表单,或触发js方法
比如搜索功能,为了让用户使用的方便流畅,需要做到用户输入关键字后,点击回车,直接提交进行搜索。
又比如用户注册功能,具有比较复杂的表单输入项,需要用户将表单输入完整后,方可点击提交。这就需要避免回车误提交。
但是html里面,有很多关于form回车提交的事件。这里整理了几种情况,做个记录:
1、form表单中,有一个submit,回车生效,例如:
<form> <input type="text" name="id" /> <input type="text" name="code"/> <input type="submit" value="sub"/> </form>
2、form表单中只有一个type=”text” 的input,无论按钮是什么,回车键生效,例如:
<form> <input type="text" name="keyword" /> </form>
3、按钮不是input,而是button,并且没有指定type=“button”,IE下默认为type=button,火狐、chrome默认为type=“submit”,例如:
<!--这种写法,火狐、chrome等浏览器下,回车生效--> <form> <input type="text" name="id" /> <input type="text" name="code"/> <button>sub</button> </form> <!--这种写法,火狐、chrome等浏览器下,回车不生效--> <form> <input type="text" name="id" /> <input type="text" name="code"/> <button type="button">sub</button> </form>
4、type=”image”的input,等同于type=”submit”,考虑到日常用的应该不多,就不举例了。
综上所述,这些事件,虽然造就了一定的便利,但在不知情下,也会给表单或js的开发造成一定的困扰。
所以,开发时,简单的提交就用html自带的,方便快捷;复杂的,就需要尽量避免上面的情况,通过js提交,必要时,可以不用form标签画表单。
以上只是个人遇到的几种情况,欢迎补充。
相关推荐
1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。 <form id='form1' action='a1.jsp' method='post'>...
form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <...
NULL 博文链接:https://ice-cream.iteye.com/blog/320168
没有form表单情况下敲回车键提交表单的js代码.docx
主要介绍了禁止按回车键提交表单的方法的相关资料,需要的朋友可以参考下
想给form表单增加回车自动提交的功能 $('#password').keydown(function(event){ if (event.keyCode == 13) $('#login').click(); }); 然而,并没有达到预期的效果,而是自动刷新了表单,并将表单参数放在了url...
本以为一个很简单不过的问题,结果却花了好久才找到原因(据说是浏览器问题),按回车后执行了两次查询。 1、未修改前代码: <form id=ff name=ff method=post> <input type=text id=userName name=...
如何防止回车(enter)键提交表单,其实很简单,就一句话。onkeydown=”if(event.keyCode==13)return false;”把这句写在from标签里面就好了。如果在页面中按Enter键会自动提交的话,可以设置返回值防止自动提交如&...
本文实例讲述了js光标定位文本框回车表单提交问题的解决方法。分享给大家供大家参考。具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串。 原因:When there is only one single-...
1、当form表单中只有一个<input type=”text” name=”name” />时按回车键将会自动将表单提交。 代码如下: <form id=”form1″ action=”post.php” method=”post”> <input type=”text” ...
点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面 如何做到 将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢?...
原来文章是jsp下,其实应用了js的代码,大家可以参考下,其实各个语言的原理都一样,如果使用了ajax严重就完美的客户端验证了。
网页回车后form自动提交,跑到其他页面 有个查询的form,本来是希望点击查询时才查询的,结果测试到回车时跑到其他页面去了。 复制代码代码如下: <form action=”notice.php” method=”get”> … <...
复制代码代码如下: <!... <head> <meta charset=”utf-8″> <title>...form action=”http://www.baidu.com...如上表单在 name输入框中 按回车时,表单就会提交。而且表单中时没有submit按钮的。 经过
事情是这样的,做了一个登陆页面,把 Form 去了,直接拿 Jquery 的 Ajax 跟服务器交互,但是这样的话 浏览器就不会默认响应 回车键提交数据了。索性让 Jquery 也接管 回车键的响应吧: 代码如下: $(“#loginbox ...
(注释1) 所以,如果要控制提交行为的话(比如,提交前检查必填项是否已填),可以在type=”submit”的“input”后添加Javascript“onXXX(比如onClick)”事件。而如果需要用异步交互来检测相关字段,则无效了。...