一个列表界面只有一个输入框查询条件,当首次进入在输入框中输入汉字后,按回车键发现输入框中汉字变成乱码!本以为一个很简单不过的问题,结果却花了好久才找到原因(据说是浏览器问题),按回车后执行了两次查询。
1、未修改前代码:
<form id="ff" name="ff" method="post"> <input type="text" id="userName" name="userName" size="12" maxlength='30' value="${(data.userName)!''}" onKeypress= "javascript:if(event.keyCode==13) do_postAuditList_search();"/> </form>
2、修改后代码:
<form id="ff" name="ff" method="post"> <input type="text" id="userName" name="userName" size="12" maxlength='30' value="${(data.userName)!''}" onKeypress= "javascript:if(event.keyCode==13) do_postAuditList_search();"/> <!--解决form表单在只有一个input输入框时回车会自动提交表单--> <input style='display:none' /> </form>
即:添加一个<input type='text' style='display:none'/>不显示输入框,然后回车之后也不会提交。
补允:
出现自动提交的情况,有两种可能:
一是编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交。
二是利用了浏览器的默认行为(至少发现ie是这样的)。浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。
我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默认行为。
如果表单中含有一个单行文本输入域,那么无论含有多少其他类型的表单组件,那么在该输入域中点击Enter时,表单会自动提交。例如下面的代码:
<form action="" method="post"> <input type="text" name="sdfsdf"/> <textarea></textarea> <input type="checkbox">sdfsdf <input type="hidden" name="aa"/> </form>
如果表单中含有两个或多个单行文本输入域,那么无论是否含有其他类型的表单组件,按Enter键时不会自动提交,例如:
<form action="" method="post"> <input type="text" name="sdfsdf"/> <input type="text" name="sddf"/></form>
办法很简单,我们上面举的例子中已经有了,只要再添加一个文本输入框就可以了,可能你会说,为了不自动提交就要增加一个没有用的输入框,而且中含有两个输入框最终用户会接受吗?其实可以解决,你可以将那个新添加的输入框通过style隐藏即可,例如:
<form action="" method="post"> <input type="text" name="notautosubmit" style="display:none"/> <input type="text" name="username"/> </form>
还有一个方法可以绑定button按钮 enter触发事件:
document.onkeypress = function(){ if(event.keyCode == 13) { search(); return false; } }
其中search方法是onclick事件:<form name="searchfrom">
本文向大家介绍jsp中如何实现按下回车键自动提交表单,包括了jsp中如何实现按下回车键自动提交表单的使用技巧和注意事项,需要的朋友参考一下 为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求。 代码如下: 解决方案: 把form表单放在一个div里面 ,然后对这个div监听事件$("#id").keydown(function (){}); #*#监听回车事件 #*
本文向大家介绍Form表单按回车自动提交表单的实现方法,包括了Form表单按回车自动提交表单的实现方法的使用技巧和注意事项,需要的朋友参考一下 1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。 如果不想让其自动提交可以这样做: 再添加一个<input type=
问题内容: 如何仅在文本输入字段上使用Enter键提交表单,而不必添加提交按钮? 我记得以前曾经这样做过,但是现在我对其进行了测试,除非表单中有一个Submit-type输入字段,否则表单不会提交。 问题答案: $(“input”).keypress(function(event) { if (event.which == 13) { event.preventDefault(); $(“form
我正在为一个Angular 4组件编写一个测试,该组件是一个登录表单。可以通过单击“提交”按钮或在任何输入字段中按enter来提交表单。这种行为是由角度形式指令规定的。 我可以编写一个测试用例来验证单击按钮是否提交表单,但我不能用keypress事件触发提交行为。 从按钮分派'Click'事件的测试通过,但从输入元素分派keydown事件的测试(当前已禁用)失败。 我是否可以分派不同的事件来触发窗
问题内容: 当用户输入一个值并按时,为什么只有一个字段的a会重新加载表单,而如果其中有2个或更多字段,则为什么没有? 我写了一个简单的页面来测试这种奇怪的情况。 如果您以第二种形式输入值并按Enter键,您会看到它重新加载了通过输入值的页面,就像您调用一样。为什么?以及如何避免呢? 问题答案: 这是一个鲜为人知的“ Quirk”,已经问世了一段时间。我知道有人以各种方式解决了它。 在我看来,最简单
本文向大家介绍网页中表单按回车就自动提交的问题的解决方案,包括了网页中表单按回车就自动提交的问题的解决方案的使用技巧和注意事项,需要的朋友参考一下 1、当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交。 再添加一个 按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法: (1)添加一个 不显