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


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 异步页面查询实现代码(asp.net)
May 26 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
如何利用node转发请求详解
Sep 17 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
window下eclipse安装python插件教程
2017/04/24 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python实现批量压缩图片
2018/01/25 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
python datetime处理时间小结
2020/04/16 Python
给妈妈洗脚活动方案
2014/08/16 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
关于军训的感想
2015/08/07 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python