2018-05-01 孙小北

按回车键自动提交表单的问题

一次偶然的操作,在编辑页面,发现只要输入内容,按enter键,页面立马就跳转,有点意思。肯定enter键触发了表单提交。

在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,所以这个bug也是很有意思的。从网上查找资料,发现很多人遇到了这个有趣的问题。在此整理一下,做个记录,顺便分享一下。

出现自动提交的情况,有两种可能:
    一 、编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交。
    二 、浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。

解决的办法也有多种,整理如下:

方法一:直接对input进行操作,强行将回车键操作去掉:增加 onkeydown='if(event.keyCode==13) return false;'

<label>文档名称:<input name="Name" style="width: 400px;" value="@Model.Name" class="form-control" required onkeydown='if(event.keyCode==13) return false;'/></label>

方法二:直接在form上加上onsubmit="returnfalse;"这段话,它会阻止表单的回车键进行提交。

<form id="editform" method="post" class="form-inline" onsubmit="return false;">

方法三:很多人估计都想到过,就是既然一个input会自动提交,多个input就没问题,那么我给它多加一个input不就行了,有些人试过发现不行,那是为什么呢?因为他是这么写的<input type="hidden">,这样当然不行,一个隐藏域,type并不是text,所以不行。但是,<input type="text"style="display:none;">,使用这种方法就可以了,因为它是用样式隐藏输入框的,实质上还是一个type为text的input。


编辑:孙小北

本文地址: http://www.xiaowangyun.com/wyblog/detail/?id=180

版权归属: www.xiaowangyun.com   转载时请以链接形式注明出处

物以类聚

最新评论

2017-10-06

一辈子不长,只有珍惜了,才不至于后悔。

2017-10-06

懂得感恩,才能走得更远。

标签云

归档

取消

感谢您的支持,您的每一次打赏都是一次鼓励!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦