禁止按回车键提交表单的方法

前端技术 2023/09/09 JavaScript

出现自动提交的情况，有两种可能：

一是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。

二是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，例如如果一个页面上有表单和一个提交按钮，那么打开页面时，焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域（text），那么在这个输入域中按Enter键时，浏览器会自动提交该表单。

我们对于第一种情况一般都知道而且很容易理解，但是对于第二种浏览器的默认行为，可能知道这一点的人就比较少了，下面我具体看一下浏览器（至少ie如此）在表单提交上的默认行为。

如果表单中含有一个单行文本输入域，那么无论含有多少其他类型的表单组件，那么在该输入域中点击Enter时，表单会自动提交。

例如下面的代码：

<form action=\"\" method=\"post\">
<input type=\"text\" name=\"sdfsdf\"/>
<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\"

最终解决方案：

<script language=\"javascript\"> 
  function defineSubmit(btn) 
  { 
    if(\"submit1\" == btn.value) 
    { 
      document.testForm.action=\"firstAction\"; 
    } 
    else 
    { 
      document.testForm.action=\"secondAction\"; 
    } 
     
    document.testForm.submit(); 
  } 
</script> 
<form name=\"testForm\" method=\"post\"> 
    username:<input type=\"text\" name=\"username\"/> 
    password:<input type=\"password\" name=\"password\"/> 
    <input type=\"button\" name=\"submitName\" onclick=\"defineSubmit(this)\" value=\"submit1\"/> 
    <input type=\"button\" name=\"submitName\" onclick=\"defineSubmit(this)\" value=\"submit2\"/> 
</form>

本文地址：https://www.stayed.cn/item/25747

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案