转载自: http://www.blueidea.com/tech/web/2009/6390.asp
我们有时候希望回车键敲在文本框(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添加背景图合适些。
实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办
呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。
做了一个 demo
(点击查看) 列出了一些例子。
其实还有个更好的屏蔽回车提交的方法:在form标签那里加上 onsubmit="return false;" ,或者写段处理逻辑的代码,记得return false; 就行。 例如:
javascript 如下:
<script type="text/javascript">
// 按下回车后出发此事件
function enterPress(e) {
if (e.keyCode == 13) {
doSubmit();
}
}
// 表单提交
function doSubmit() {
var name = document.edit.name.value;
if (name == "" || name.replace(/\s{1,}/, "") == "") {
alert("分类名称不能为空!");
document.edit.name.focus();
return false;
} else {
document.edit.submit();
}
}
</script>
html 如下:
<form name="edit" onsubmit="return false;">
<input type="text" name="name" onkeydown="javascript enterPress(event);" value="测试一下">
</form>
代码比较糟糕,自己改吧。
分享到:
相关推荐
NULL 博文链接:https://ice-cream.iteye.com/blog/320168
比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,...
回车键触发表单提交代码 回车键触发表单提交原理 回车键触发表单提交思想
主要介绍了禁止按回车键提交表单的方法的相关资料,需要的朋友可以参考下
当用户在页面上按回车键时,就会触发这个默认按钮。事实上,有很多用户有在TextBox中输入数据之后按回车的习惯(似乎是长期使用Excel养成的习惯)。想像一下,当用户依次在20个TextBox中输入了数据之后,一不小心...
本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的jquery实现方法,有需要了解的朋友可进来参考以。 键盘事件有3: jquery键盘事件参考: 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() ...
比如在windows系统的很多应用程序中,只要点击回车键就可以进入此程序或者开启某项功能,不过有时候我们希望阻止它的功能,例如在填写表单的时候,可能不小心点击回车键造成表单误提交,下面就来简单介绍一下如何...
事情是这样的,做了一个登陆页面,把 Form 去了,直接拿 Jquery 的 Ajax 跟服务器交互,但是这样的话 浏览器就不会默认响应 回车键提交数据了。索性让 Jquery 也接管 回车键的响应吧: 代码如下: $(“#loginbox ...
当提交form表单数据时直接触发回车键,就可以提交表单。为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求。
form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <...
以上的代码,在这几天测试发现有一个问题,在登录进系统之后,从首页切换到其他界面,点击回车,会导致界面调整到首页! 要实现: 只在Login界面点击回车才执行onkeypress方法,其他的点回车均不触发(还不明白为
前几天,老师让编写一段代码:是在 javascript 表单中,用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中。应用目前为止学到的知识试着编写代码,在编写的过程中遇到了几个难点:取模计算;在...
在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为...
起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题。 可困难马上就出现了,我发现这条路是走不通的。 我们经常可以主动触发某个事件,比如 el.click() 就可以调用...
今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
而在我的IE6.0下,则无此问题。 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发”...
后来google一下,发现这是asp.net2.0为表单处理专门设置的”Enter key”功能,关于asp.net ajax表单的enter key,你可以查看这一篇《ASP.NET基于Ajax的Enter键提交问题》。前面给出链接的两篇都是叫我们怎么设置...
解决回车键(Enter)触发 form 表单提交的问题 :umbrella_on_ground: Css width 和 height position 自动换行显示问题 伪元素 css 加载顺序 media 查询 元素分类 css 属性选择器区别 :pencil: JavaScript js 中的 ...