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


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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
JS中==与===操作符的比较
Mar 21 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 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
php 抽象类的简单应用
2011/09/06 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
ionic2中使用自动生成器的方法
2018/03/04 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python常用知识点汇总
2016/05/08 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
寒假思想汇报
2014/01/10 职场文书
会计专业导师推荐信
2014/03/08 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
大专生找工作自荐书
2014/06/10 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
旅游项目合作意向书
2015/05/08 职场文书