在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交。

在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Ajax请求返回结果;而按下enter键是直接post请求然后跳转返回一个页面,失去了页面样式及导航等。

一开以为是写了js代码导致按下enter键之后会触发表单提交,后来把js代码全部移除也是一样地按下enter键会触发表单提交。到网上搜索发现是因为默认情况下在form表单内按下enter键会触发表单自动提交。有时这并不是好事,因为按下enter键自动提交是直接通过post请求发出的,然后返回一个结果页面,页面会刷新跳转,而万一我需要通过Ajax异步方式发送请求时,若不更改代码则会出现按enter键请求返回的页面与按下提交按钮后执行js代码通过Ajax异步请求获得的结果不一致的情况。

解决方法有三:

1、最简单高效的方法是在表单里加上

  1. <input style="display:none;"/>

这样一行代码,这样按下enter键后就表单就不会自动提交了。

2、监听keypress事件,当keycode是13,即按下enter键时,调用 preventDefault() 阻止事件传播

  1. $("#keyword").on("keypress", function(evt) {//keydown 与keypress事件在这里显示出不同了
  2. var keynum=0;
  3. if(window.event) // IE
  4. {
  5. keynum = evt.keyCode;
  6. }
  7. else if(evt.which) // Netscape/Firefox/Opera
  8. {
  9. keynum = evt.which;
  10. }
  11. // alert (keynum);
  12. if (keynum == 13) {
  13. ftiaoPageUtils.toPage(1);
  14. var e = evt ? evt : window.event;
  15. if (window.event) {
  16. // 由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD
  17. // Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒 泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。
  18. e.cancelBubble=true;
  19. } else {
  20. // 该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。
  21. // e.stopPropagation();
  22. e.preventDefault();
  23. }
  24. }
  25. });

3、使用如下代码:

  1. <script type="text/javascript" src="./js/common/jquery-1.11.1.min.js"></script>
  2. <script language="javascript" type="text/javascript"><!--
  3. //禁用Enter键表单自动提交
  4. $("#keyword").on("keydown", function(event) {
  5. var target, code, tag;
  6. if (!event) {
  7. event = window.event; //针对ie浏览器
  8. target = event.srcElement;
  9. code = event.keyCode;
  10. if (code == 13) {
  11. tag = target.tagName;
  12. if (tag == "TEXTAREA") { return true; }
  13. else { return false; }
  14. }
  15. }
  16. else {
  17. target = event.target; //针对遵循w3c标准的浏览器,如Firefox
  18. code = event.keyCode;
  19. if (code == 13) {
  20. tag = target.tagName;
  21. if (tag == "INPUT") { return false; }
  22. else { return true; }
  23. }
  24. }
  25. });
  26.  
  27. // --></script>

参考:http://blog.csdn.net/chjttony/article/details/5885471

按下enter键后表单自动提交问题的更多相关文章

  1. form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  2. 按Enter键后Form表单自动提交的问题

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  3. 输入URL按下enter键后发生的事

    输入URL按下enter键后浏览器和服务器各自发生的事. 浏览器 1.用户在浏览器中输入URL地址 2.浏览器解析用户输入的URL地址=>域名+端口 3.浏览器检查本地缓存中是否存在这个域名=& ...

  4. Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

  5. FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...

  6. 遇到的一个Form表单自动提交问题解决办法

    Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...

  7. chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)

    开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...

  8. ASP.NET MVC 客户端验证失败后表单仍然提交问题

    客户端验证失败后表单仍然提交问题!导致页面刷新,辛辛苦苦输入的内容荡然无存. 多么奇怪的问题.按道理,验证失败,就应该显示各种错误信息,不会提交表单才对.而现在,错误信息正常显示,但页面却刷新了一遍. ...

  9. form表单自动提交

    form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性 ...

随机推荐

  1. (转)雅虎工程师提供的css初始化示例代码

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,b ...

  2. javascript应用之如何判断一个数为素数

    判断是否为素数? 质数(prime number)又称素数,有无限个.质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数的数称为质数. 合数,数学用语,英文名为Composite numb ...

  3. 什么是jsonp

    Jsonp其实就是一个跨域解决方案. Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的. 所以可以把要请求的数据封装成一个js语句,做一个方法的调用. 跨域请求js脚本可以得到此脚本.得到 ...

  4. electron-Node.js Error: Module version mismatch. Expected

    本来以为是nodejs的版本问题,后来才发现是electron用本地包的问题 Installing modules and rebuilding for Electron You can also c ...

  5. linux如何查看系统信息

    一:cpu [root@srv /]# more /proc/cpuinfo | grep "model name" model name    : Intel(R) Xeon(R ...

  6. javac 及 java命令的使用问题(错误或无法加载主类)

    一.问题 使用 javac 命令编译完.java源文件后,用 java 命令运行.class文件时,通常会遇到如下或类似的问题: 错误: 找不到或无法加载主类 HelloWorld.class 二.解 ...

  7. thinkphp传递参数

    php文件输出 U() 跳转地址, echo U('Index/index',array('uid'=>1,'username'=>'wang','time'=>165465121) ...

  8. Auto generating Entity classes with xsd.exe for XML Serialization and De-Serialization

    More info here: http://blogs.msdn.com/b/yojoshi/archive/2011/05/14/xml-serialization-and-deserializa ...

  9. docker和shipyard使用问题

    http://blog.csdn.net/cuisongliu/article/details/49178461 Docker启动如果随服务一起启动? docker run -ti -d --rest ...

  10. PHP笔记

    <?php//统计访问量 if(!@$fp=fopen("num.txt","r")){ echo "num.txt文件创建成功!<br& ...