我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:
1. 如果表单里有一个type=”submit”的按钮,回车键生效。
2. 如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。
3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
5. type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。
6.我们在处理表单的页面可以检验他是否点击了按钮来控制下面的程序。if($_POST['submit']){ 如果点击了按钮 程序继续}
实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办 呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。
通过以上可知只要把type="submit"改成type="button"然后js提交, 在不要有一个type=”text”的input就行了。就不会发生回车跳转。
但实验发现,ie和火狐不一样,火狐的submit按钮有掩藏的(display:block)和显现的都不行,必须全改,但ie只要显现的没有submit就行了。
<!DOCTYPE html> <html> <head> <meta charset="gb18030" /> <meta http-equiv="Content-Type" content="text/html; charset=gb18030" /> <title>HTML 5 gb18030编码格式</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> function doSubmit() { alert("XXXXXXXXX"); return false; } //监听回车 /* $(document).ready(function() { $(document).keydown(function(e) { if (e.keyCode == 13) { alert("xxxxNX"); } });<input type="submit" value="submit" /> });*/ </script> <form onsubmit="return doSubmit();" method="post" action=""> <input type="text" /> <input type="button" value="button" /> <input type="text" style="display:none" value="此处的input删掉然后回车按钮就会触发提交" /> </form> </body> </html>
相关推荐
form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <...
ASP.NET回车提交事件其实说到底并不是ASP.NET 的编程问题,却是关于html form 中的submit 按钮就是如何规划的具体讨论。 也可归于ASP.NET编程的一部分,那么ASP.NET回车提交事件的具体实现是怎么样的呢?下面我们...
时按回车键将会自动将表单提交。 代码如下: <form id=”form1″ action=”post.php” method=”post”> <input type=”text” name=”name” /> </form> 再添加一个 代码如下: <...
(注释1) 所以,如果要控制提交行为的话(比如,提交前检查必填项是否已填),可以在type=”submit”的“input”后添加Javascript“onXXX(比如onClick)”事件。而如果需要用异步交互来检测相关字段,则无效了。...
复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <...如上表单在 name输入框中 按回车时,表单就会提交。而且表单中时没有submit按钮的。 经过
ctrl加回车提交.htm E-mail表单递交.htm E-mail递交.htm flash的超酷播放.htm Form中时间显示.htm _Form中的时钟.htm _Form栏特全时钟.htm Form框中导航.htm FTP页面登录.htm Html与Asp互转工具.htm HTML代码的预览....
代码如下 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>...光变置入输入域,敲回车键。非IE6、7中会依次弹出 1, 3。说明依次触发了button的click事件,且自动将for
1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、...
在asp.net引入事件驱动...用户按回车也不是没有提交表单,通过httpwath可以看到,实际上页面表单是提交到了form下的action页面,只不过没有触发onclick事件而已。 在asp.net事件驱动模式下面,要实现通过回车来触发事
解决回车键(Enter)触发 form 表单提交的问题 :umbrella_on_ground: Css width 和 height position 自动换行显示问题 伪元素 css 加载顺序 media 查询 元素分类 css 属性选择器区别 :pencil: JavaScript js 中的 ...
后来google一下,发现这是asp.net2.0为表单处理专门设置的”Enter key”功能,关于asp.net ajax表单的enter key,你可以查看这一篇《ASP.NET基于Ajax的Enter键提交问题》。前面给出链接的两篇都是叫我们怎么设置...
若没有这句话,按下回车后,仅仅只改变了文本框里的内容,但是由于form本身就监控了回车按键默认为submit,提交的是文本框改变之前的内容,解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容,...
\r 匹配一个回车符 \s 匹配一个空白字符,包括\n,\r,\f,\t,\v等 \S 匹配一个非空白字符,等于/[^\n\f\r\t\v]/ \t 匹配一个制表符 \v 匹配一个重直制表符 \w 匹配一个可以组成单词的字符(alphanumeric,这是我的意译...
* \f The form-feed character ('\u000C') \f The form-feed character ('\u000C') * \a The alert (bell) character ('\u0007') \a The alert (bell) character ('\u0007') * \e The ...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 5、说说你用过那些ajax技术和框架,说说它们的...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...
3、HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交? 84 4、请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码 84 5、说说你用过那些ajax技术和框架,说说...