最近做了一个系统,重新搭建了前端,采用jquery validate插件做表单验证。一切都进行的非常顺利。可是恶心的事情发生了,为了配套校验机制,在弹出框的搜索条件页,也用了form标签,仅仅是为了表单验证方便。但是当只有一个查询条件(text文本输入框)的时候,却发现只要输入条件按enter键,页面立马就跳转了,而且跳转的路径很奇怪,然后就出现404错误。
凭借直觉,不用说,就是enter键触发了表单提交。但是当前业务这样的表单,只是方便做校验,并非要与后台通信的。一番搜索,问题如下:
出现自动提交的情况,有两种可能:
一 、编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交。
二 、利用了浏览器的默认行为(至少发现ie是这样的)。浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。
我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默认行为。
如果表单中含有一个单行文本输入域,那么无论含有多少其他类型的表单组件,那么在该输入域中点击Enter时,表单会自动提交。例如下面的代码:
<form action="" method="post"> <input type="text" name="sdfsdf" /> <textarea</textarea> <input type="checkbox" name='' /> <input type="hidden"name="aa" value='' /> </form
解决的办法很简单,只要再添加一个文本输入框就可以了,可能你会说,为了不自动提交就要增加一个没有用的输入框,而且中含有两个输入框最终用户会接受吗? 其实可以解决,你可以将那个新添加的输入框通过style 隐藏即可,例如:
<form action="" method="post"> <input type="text" name="notautosubmit" style="display:none"/> <input type="text" name="username"/> </form>
还有一个方法可以监听键盘按键,如果是keyCode=13,则选择性过滤事件的响应即可。
document.onkeypress = function(){ if(event.keyCode == 13) { return false; } }
相关推荐
主要介绍了禁用Enter键表单自动提交实现代码,需要的朋友可以参考下
同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。 我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人...
如果在页面中按Enter键会自动提交的话,可以设置返回值防止自动提交如<input id=”q” name=”q” type=”text” onkeypress=”[removed]return gosearch();”>返回值必须是false 代码如下: function gosearch...
一个列表界面只有一个输入框查询条件,当首次进入在输入框中输入汉字后,按回车键发现输入框中汉字变成乱码!本以为一个很简单不过的问题,结果却花了好久才找到原因(据说是浏览器问题),按回车后执行了两次查询。...
form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <...
如何防止回车(enter)键提交表单,其实很简单,就一句话。onkeydown=”if(event.keyCode==13)return false;”把这句写在from标签里面就好了。 <!DOCTYPE html> <html> <head> <meta charset=" ...
当提交form表单数据时直接触发回车键,就可以提交表单。为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求。
而在我的IE6.0下,则无此问题。 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发”...
想给form表单增加回车自动提交的功能 $('#password').keydown(function(event){ if (event.keyCode == 13) $('#login').click(); });...问题解决,原因应该是form表单按enter会自动提交的原因。
今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
当您输入内容到一个网页表单的文本框内, 自动完成将列出与您以前输入的内容最相符的条目. 在方便的同时, 它同时也将列出过时的, 带有启示性的或者令人尴尬的信息. 在下面, 您可以找到那些保存于自动完成列表中的...
8、 给确定按钮增加Ctrl + Enter快捷键,锁屏的时候支持tab与方向键切换按钮焦点 9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在对话框中可用)与全选 10、修复Chrome特定情况下出现的iframe错位问题 11、修正...
ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示日期.html 不准粘贴.html 不能为空和邮件地址的约束.html 不要滚动条.html 光标是停...
仔细分析这样的页面一般都满足以下条件:1、包含FORM表单 2、只有一个文本框 这样问题就可以解决了,破坏其中任何一个条件即可,一般的做法是加一个隐藏的文本框 当然你也可以在表单 form 后面加上一个 onsubmit ...
zzzcms的管理系统处处为了让站长更节省时间,减少站长和管理员工作,在交互上尽量减少操作步骤,降低确认,返回,知道了等按钮的出现,并支持按键exc,ctrl+enter返回和提交功能。 集成好了自动关键词,自动描述,...
解决回车键(Enter)触发 form 表单提交的问题 :umbrella_on_ground: Css width 和 height position 自动换行显示问题 伪元素 css 加载顺序 media 查询 元素分类 css 属性选择器区别 :pencil: JavaScript js 中的 ...