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


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 相关文章推荐
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
javascript求日期差的方法
Mar 02 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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
Banner程序
2006/10/09 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
python实现的防DDoS脚本
2011/02/08 Python
Python装饰器的函数式编程详解
2015/02/27 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python求绝对值的三种方法小结
2019/12/04 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
护理专业毕业生推荐信
2013/10/31 职场文书
家长评语和期望
2014/02/10 职场文书
志愿者活动总结
2014/04/28 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
护士年终个人总结
2015/02/13 职场文书
大学运动会加油稿
2015/07/22 职场文书
初中政治教学工作总结
2015/08/13 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫