网页中表单按回车就自动提交的问题的解决方案


Posted in Javascript onNovember 03, 2014

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

<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" />   

</form> 

再添加一个

<input type="text" /> 

按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:
(1)添加一个

<input style="display: none;" type="text" /> 

不显示输入框,然后回车之后也不会提交:

<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" />   

    <input style="display:none" />   

</form> 

(2)添加一个onkeydown事件,然后回车之后也不会显示:

<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" onkeydown="if(event.keyCode==13) return false;"/>   

</form>

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

<form id="form1" action="post.php" method="post">   

    <input style="display:none" />   

    <input type="text" name="name" onkeydown="if(event.keyCode==13){gosubmit();}" />   

</form>

我们有时候希望回车键敲在文本框(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添加背景图合适些。

Javascript 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
JavaScript仿京东轮播图效果
Feb 25 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 #Javascript
jquery处理json对象
Nov 03 #Javascript
js格式化时间小结
Nov 03 #Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 #Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 #Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 #Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 #Javascript
You might like
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
React中的render何时执行过程
2018/04/13 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python中argparse模块用法实例详解
2015/06/03 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
用pycharm开发django项目示例代码
2018/10/24 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python基于opencv 实现图像时钟
2021/01/04 Python
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
医学生职业生涯规划书范文
2014/03/13 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
树转促学习心得体会
2014/09/10 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Python pygame实现中国象棋单机版源码
2021/06/20 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android