禁止按回车键提交表单的方法
更新时间：2015年06月11日 12:10:48 投稿：hebedich
这篇文章主要介绍了禁止按回车键提交表单的方法的相关资料,需要的朋友可以参考下
出现自动提交的情况，有两种可能：
一是编写了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>
相关文章
今天小编就为大家分享一篇解决js相同的正则多次调用test()返回的值却不同的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
javascript中没有像c#,java那样的哈希表(hashtable), 然而，javascript中的Array也只有一些类似于'哈希表'的非常简单功能。2009-10-10
这篇文章主要为大家详细介绍了JavaScript原型封装轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
JavaScript中的作用域与闭包、原型与原型链、异步与单线程
JavaScript的三座大山指的是:作用域和闭包、原型和原型链、异步与单线程,这些概念在日常的开发工作中经常被提及,并对我们理解和编写高质量的JavaScript代码至关重要2024-02-02
JavaScript 是一种有趣的语言，我们都喜欢它，因为它的性质。这篇文章主要介绍了8个有意思的JavaScript面试题 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JS实现超炫网页烟花动画效果的方法,实例分析了javascript实现烟花动画效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS简单实现点击复制链接的方法,提供了2种简单的复制链接操作方法供大家选择使用,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JS访问DOM节点方法,结合实例形式较为详细的分析了JS访问DOM节点的相关函数与使用方法,需要的朋友可以参考下2016-11-11![JS写的数字拼图小游戏代码[学习参考]](//img.jbzj.com/images/xgimg/bcimg8.png)
昨天没事做，就用JS写了个数字拼图的小游戏，自娱自乐。 可惜关于逆序数的问题还没解决，现在有时是拼不成的，大家见谅了。2008-10-10
这篇文章主要介绍了JavaScript内存优化,主要是javascript的应用越来越复杂,内存问题所导致的卡顿、内存溢出等现象也变得不再陌生,所以说也谈内存优化,需要的朋友可以参考下2014-06-06
![JS写的数字拼图小游戏代码[学习参考]](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论