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


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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
详解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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
简单的三步vuex入门
2018/05/20 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
解决Django中调用keras的模型出现的问题
2019/08/07 Python
Django中FilePathField字段的用法
2020/05/21 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
Linux常见面试题
2016/10/04 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
自荐信需注意事项
2014/01/25 职场文书
中学清明节活动总结
2014/07/04 职场文书
单位工作证明
2014/10/07 职场文书
网络营销计划书
2015/01/17 职场文书
护士个人总结范文
2015/02/13 职场文书
创业计划书之游泳馆
2019/09/16 职场文书