form表单按回车键提交处理方法-js教程-PHP中文网

form表单按回车键提交处理方法

巴扎黑

发布： 2016-11-25 14:29:47

原创

1588人浏览过

1、当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。

Html代码

<form id='form1' action='a1.jsp' method='post'>  
<input type='text' name='name' />  
</form>

登录后复制

再添加一个<input type="text"/>按下回车将不会自动提交，但是页面上显示一个不知所云的输入框挺别扭，后从网上搜到两个解决办法：

　　1；添加一个<input type='text' style='display:none'/>不显示输入框，然后回车之后也不会提交：

Html代码

<form id='form1' action='a1.jsp' method='post'>  
<input type='text' name='name' />  
<input style='display:none' />  
</form>

登录后复制

2；添加一个onkeydown事件，然后回车之后也不会显示：

Html代码

<form id='form1' action='a1.jsp' method='post'>  
<input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/>  
</form>

登录后复制

如果想添加回车事件可以在onkeydown事件中添加判断提交表单：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

Html代码

<form id='form1' action='a1.jsp' method='post'>  
<input style='display:none' />  
<input type='text' name='name' onkeydown="onKeyQuery(event);" />  
</form>

登录后复制

Js代码

//回车查询  
   function onKeyQuery(e){  
       if(window.event) // IE  
       {  
           keynum = e.keyCode  
       }  
       else if(e.which) // Netscape/Firefox/Opera  
       {  
           keynum = e.which  
       }  
       if(keynum == 13){  //等于13代表 回车键  
           //具体处理在这里  
       }  
   }

登录后复制

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：

如果表单里有一个type=”submit”的按钮，回车键生效。
如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。

大家都在看：

JS跨域解决方案_CORS与JSONP详解 JS沙箱环境_代码隔离实现方案 JS正则表达式实战_表单验证技巧合集如何利用js脚本实现页面滚动_js滚动效果脚本制作与代码解析 JS变量提升详解_JavaScript核心概念解析