谈谈Enter回车键提交表单那些事
我们在做系统前端的时候,往往会用到form标签,采用jquery插件做表单验证。我们信誓旦旦的一位把一切都做好的时候,并且检查一遍又一遍的时候,意向不到的事情发生了,也许是出于一种意外,而这种意外我们从来没有想到,我们不小心碰下了enter键,然后我们发现该走的js它没有走,跳到下一个页面,或者就直接404了。想都不用想,绝对是enter键直接把表单提交了.表单在什么情况下会enter提交呢?我们如果不想表单通过enter键提交我们应该怎么做呢?
出现自动提交的情况,有两种可能:
1.是编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交。
2.是利用了浏览器的默认行为(至少发现ie是这样的)。浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。
对于第一种情况的话我们很好理解,我们可以通过下面的方法实现:
<pre class="html" name="code"> $(document).keyup(function(event){if(event.keyCode ==13){$("#submit").trigger("click");}});
但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,有可能是浏览器在表单提交上的默认行为。
这种情况一般都在什么时候发生呢,以ie为例,讲讲它在什么情况下会发生这样的现象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>submit例子 - aspxhome.com</title>
</head>
<body><h1>本demo演示在文本框中按enter键是否触发提交表单</h1><h2>默认情况下,一个文本框的时候,提交,不管按钮type是submit还是button</h2><form action="http://www.csdn.net"><input type="text"><input type="button" value="提交"></form><h2>一个文本框的时候怎么才能做到不提交,方法是加一个隐藏掉的文本框</h2><form action="http://www.csdn.net"><input type="text"><input type="text" style="display:none"><input type="button" value="提交"></form><h2>只要有type为submit的按钮存在,一个文本框还是多个文本框都提交</h2><form action="http://www.csdn.net"><input type="text"><input type="submit" value="提交"></form><h2>只要有type为submit的按钮存在,一个文本框还是多个文本框都提交</h2><form action="http://www.csdn.net"><input type="text"><input type="text"><input type="submit" value="提交"></form><h2>多个文本框的时候,不提交,用type为button的按钮就行啦</h2><form action="http://www.csdn.net"><input type="text"><input type="text"><input type="button" value="提交"></form><h2>用button元素时,FX和IE下有不同的表现</h2><form action="http://www.csdn.net"><input type="text"><input type="text"><button>提交</button></form><h2>radio和checkbox在FX下也会触发提交表单,在IE下不会</h2><form action="http://www.csdn.net"><input type="text"><input type="radio" name="a"><input type="checkbox" name="b"><input type="checkbox" name="c"><input type="button" value="提交"></form><h2>type为image的按钮,等同于type为submit的效果</h2><form action="http://www.csdn.net"><input type="text"><input type="text"><input type="image" src="/images/logo.gif"></form>
</body>
</html>
我们知道了Enter键提交的原理之后我们很明显就有了相对应的解决方法
通常我们用的方法有两种:
1.我们在form标签中来禁止enter键提交
<form name="form" action="" method="post" οnkeydοwn="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();">
2.我们可以在form中增加一个隐藏的输入框
<span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"notautosubmit"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"display:none"</span><span class="tag">/></span>
<span class="tag">其次我们可以在type = "test" 中增加οnkeypress="javascript:return gosearch();"方法</span>
<span class="tag"></span>function gosearch() { if(window.event.keyCode == 13) { search(); return false; }
}
希望对你们有帮助,顺便说一下,这个编辑器太恶心了,每次都得害我丢失内容,乱加东西,并且一点也不好用。
谈谈Enter回车键提交表单那些事相关推荐
- jq html 回车提交表单,jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,documen ...
- 如何实现通过回车键提交表单
对于B/S的系统,在页面控制上不如C/S系统那么控制灵活,就比如现在一个页面或用户控件里有两个按钮button1和button2,两个文本框Textbox1和Textbox2,当您想控制当焦点在Tex ...
- Form表单 回车(Enter)提交表单问题
Form表单 回车(Enter)提交表单问题 在Form表单中input会自动响应回车事件.这是表单的默认提交动作. 表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的but ...
- 回车键提交与不提交表单的解决方法
最近遇到IE6/7下敲击回车后表单不提交的问题,网上找到些资料,备案下: 回车键提交表单:设置 <input /> 标签或者 <button> 标签的属性 type=" ...
- 不同浏览器对回车提交表单的处理办法(转载)
不同浏览器对回车提交表单的处理办法(转载) 对下面的一段代码,刚开始使用 onClick 事件,在 IE 6.0 中,要按"提交"按扭才起做用,直接回车不行,而在 firefox ...
- html 禁用回车提交,HTML防止input回车提交表单
原链接:https://blog.csdn.net/ligang2585116/article/details/44699567 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的type=& ...
- h5移动端使用手机自带软键盘的“前往”、“go”键提交表单
这也是我自己在项目中遇到的问题,在网上找了很久都没有找到类似的.试了很多次浪费了很多时间 登录和搜索时"前往"."go"或者回车(电脑键盘)键提交表单(form ...
- 通过按Enter阻止用户提交表单
我在网站上进行了一项调查,用户单击Enter键(我不知道为什么),然后不按提交按钮就意外提交了调查(表单),似乎存在一些问题. 有办法防止这种情况吗? 我在调查中使用的是HTML,PHP 5.2.9和 ...
- 如何防止按钮提交表单
在下一页中,使用Firefox,"删除"按钮提交表单,但"添加"按钮不提交. 如何防止"删除"按钮提交表单? <html> &l ...
最新文章
- PHP5.3.8连接Sql Server SQLSRV30
- 一篇与众不同的 String、StringBuilder 和 StringBuffer 详解
- windows怎么用qt MinGW gcc编译c代码
- 研究生第一篇学术论文常犯问题总结【喻海良箴言】
- ajax多文件上传,js限制上传文件大小,文件上传前在浏览器展示
- JAVA EXCEL API(jxl)简介
- typora 公式_如何用Typora写Markdown上传至知乎
- 持续集成coding
- oracle删除多条从js到java_一次oracle大量数据删除经历
- 综述 | 联邦学习-新兴的人工智能基础技术
- 微服务写的最全的一篇文章
- (转)淘淘商城系列——服务调用测试
- java 协议这个概念_java网络协议概念是什么?
- mysql可重复读和间隙锁_解决MySQL可重复读——详解间隙锁
- [转]C#操作Excel开发报表系列整理
- 拓端tecdat|R语言贝叶斯推断与MCMC:实现Metropolis-Hastings 采样算法示例
- BZOJ 1260 paint
- C语言中的指针加减偏移量
- 前端学习路线-实习生必备
- 苹果输入法怎么换行_最全的输入法皮肤,你想要的百度输入法都有