Home > Web Front-end > HTML Tutorial > How to prohibit pressing the Enter key to submit a form_html/css_WEB-ITnose

How to prohibit pressing the Enter key to submit a form_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:43:07
Original
1420 people have browsed it

出现自动提交的情况,有两种可能:一是编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交。二是利用了浏览器的默认行为(至少发现ie是这样的)。浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默认行为。如果表单中含有一个单行文本输入域,那么无论含有多少其他类型的表单组件,那么在该输入域中点击Enter时,表单会自动提交。
Copy after login
例如下面的代码:<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();returnfalse;}}其中search方法是onclick事件:<form name="searchfrom"
Copy after login

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template