按下enter键后表单自动提交问题
在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交。
在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Ajax请求返回结果;而按下enter键是直接post请求然后跳转返回一个页面,失去了页面样式及导航等。
一开以为是写了js代码导致按下enter键之后会触发表单提交,后来把js代码全部移除也是一样地按下enter键会触发表单提交。到网上搜索发现是因为默认情况下在form表单内按下enter键会触发表单自动提交。有时这并不是好事,因为按下enter键自动提交是直接通过post请求发出的,然后返回一个结果页面,页面会刷新跳转,而万一我需要通过Ajax异步方式发送请求时,若不更改代码则会出现按enter键请求返回的页面与按下提交按钮后执行js代码通过Ajax异步请求获得的结果不一致的情况。
解决方法有三:
1、最简单高效的方法是在表单里加上
<input style="display:none;"/>
这样一行代码,这样按下enter键后就表单就不会自动提交了。
2、监听keypress事件,当keycode是13,即按下enter键时,调用 preventDefault() 阻止事件传播
$("#keyword").on("keypress", function(evt) {//keydown 与keypress事件在这里显示出不同了
var keynum=0;
if(window.event) // IE
{
keynum = evt.keyCode;
}
else if(evt.which) // Netscape/Firefox/Opera
{
keynum = evt.which;
}
// alert (keynum);
if (keynum == 13) {
ftiaoPageUtils.toPage(1);
var e = evt ? evt : window.event;
if (window.event) {
// 由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD
// Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒 泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。
e.cancelBubble=true;
} else {
// 该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。
// e.stopPropagation();
e.preventDefault();
}
}
});
3、使用如下代码:
<script type="text/javascript" src="./js/common/jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript"><!--
//禁用Enter键表单自动提交
$("#keyword").on("keydown", function(event) {
var target, code, tag;
if (!event) {
event = window.event; //针对ie浏览器
target = event.srcElement;
code = event.keyCode;
if (code == 13) {
tag = target.tagName;
if (tag == "TEXTAREA") { return true; }
else { return false; }
}
}
else {
target = event.target; //针对遵循w3c标准的浏览器,如Firefox
code = event.keyCode;
if (code == 13) {
tag = target.tagName;
if (tag == "INPUT") { return false; }
else { return true; }
}
}
}); // --></script>
参考:http://blog.csdn.net/chjttony/article/details/5885471
按下enter键后表单自动提交问题的更多相关文章
- form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...
- 按Enter键后Form表单自动提交的问题
怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...
- 输入URL按下enter键后发生的事
输入URL按下enter键后浏览器和服务器各自发生的事. 浏览器 1.用户在浏览器中输入URL地址 2.浏览器解析用户输入的URL地址=>域名+端口 3.浏览器检查本地缓存中是否存在这个域名=& ...
- Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
- FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别
在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...
- 遇到的一个Form表单自动提交问题解决办法
Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...
- chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)
开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...
- ASP.NET MVC 客户端验证失败后表单仍然提交问题
客户端验证失败后表单仍然提交问题!导致页面刷新,辛辛苦苦输入的内容荡然无存. 多么奇怪的问题.按道理,验证失败,就应该显示各种错误信息,不会提交表单才对.而现在,错误信息正常显示,但页面却刷新了一遍. ...
- form表单自动提交
form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性 ...
随机推荐
- EF-CodeFirst 继承关系TPH、TPT、TPC
继承关系 面向对象的三大特征之一:继承 ,在开发中起到了重要的作用.我们的实体本身也是类,继承自然是没有问题.下面开始分析 EF里的继承映射关系TPH.TPT.TPC 现在我们有这样一个需求,用户里要 ...
- Oracle 数据类型
类型 含义 CHAR(length) 存储固定长度的字符串.参数length指定了长度,如果存储的字符串长度小于length,用空格填充.默认长度是1,最长不超过2000字节. VARCHAR2(le ...
- 和redis谈一场恋爱(第二天约会了解彼此)
最近使用了Memcache,带来的便利已经让我欣喜若狂.开启了另一种又快又好的方式存储和读取数据.中间经过了一番折腾,学习了mysql,终于有学到了redis. Redis的全名是Remote Dic ...
- mainBundle和CustomBundle
iOS中NSBundle类 An NSBundle object represents a location in the file system that groups code and resou ...
- SaltStack配置管理之状态模块和jinja2(五)
官方文档 https://docs.saltstack.com/en/latest/topics/states/index.html 配置管理之SLS Salt State SLS描述文件(YAM ...
- window.location.href的用法
在写ASP.Net程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect 做ASP.NET框架页跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如: Respon ...
- asp.net 性能优化
在MSDN网络课堂中下载了一些九月份的网络讲座.有很多还是很有意义的.<ASP.NET系列讲座之一:性能与缓存>是由微软开发工具专家王立楠讲授.王先生的讲解非常清晰,课件也很详细,虽然是网 ...
- WinForm------关于子窗体刷新父窗体问题
链接: http://wenwen.sogou.com/z/q242758397.htm
- JavaWeb学习笔记——访问静态HTML网页
基础知识: 1.一个标准 的WEB应用,在根目录下必须有一个WEB-INF文件夹,文件夹下必须有一个WEB.xml文件. 2.classes文件夹用来存放编译的class文件. 3.lib文件夹用来存 ...
- 入门:HTML表单与Java 后台交互(复选框提交)
仅仅给出部分关键代码: HTML form code: <form action="JavaFormTest" method="post" name=&q ...