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


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 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
jQuery操作css样式
2017/05/15 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
JS如何生成动态列表
2020/09/22 Javascript
Python中常用信号signal类型实例
2018/01/25 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python实现批处理文件
2020/07/28 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
ant design charts 获取后端接口数据展示
2022/05/25 Javascript
python语言中pandas字符串分割str.split()函数
2022/08/05 Python