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


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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
angular.js分页代码的实例
Jul 27 Javascript
利用vue写todolist单页应用
Dec 15 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
图书管理程序(三)
2006/10/09 PHP
PHP静态新闻列表自动生成代码
2007/06/14 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
python实现神经网络感知器算法
2017/12/20 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
python中的for循环
2018/09/28 Python
Python函数中的可变长参数详解
2019/09/12 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
python如何更新包
2020/06/11 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
python如何删除列为空的行
2020/07/17 Python
Python3获取cookie常用三种方案
2020/10/05 Python
创业计划书的内容步骤和要领
2014/01/04 职场文书
运动会口号大全
2014/06/07 职场文书
项目备案申请报告
2015/05/15 职场文书
常用的Python代码调试工具总结
2021/06/23 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL