js监听回车事件
标题通俗的说，也就是绑定当用户按下回车键要执行的事件。
下面，入正题。
第一步，先编写简单的页面代码，这里我们只需要一个按钮就足够了。当然，还有按钮事件。 <html>
<head>
<title>测试绑定enter</title>
<script type="text/javascript">
function b_onclick() { alert("你好！"); }
</script>
</head>
<body>
<input type="button" value="测试按钮" id="test" onclick="b_onclick()" /> </body>
</html>
第二步，于b_onclick()函数加入如下js代码：
function document.onkeydown()
{ //使用document.getElementById获取到按钮对象
var button = document.getElementById("test");
if(event.keyCode == 13)
{
button.click();
event.returnValue = false;
}
}
然后于IE中运行，你会发现，即使焦点不在按钮上，当你按下回车，依然执行了按钮的函数。稍微解释一下代码： event.keyCode == 13是判断按下的是那一个间，13代表的是回车键。 button.click();执行按钮事件。 event.returnValue = false;这个是为了防止浏览器捕捉到用户按下回车键而进行其他操作。例如假如输入框中，没有这行代码的话，在执行完按钮事件后，其还会执行换行的动作。第三步，很多人都认为做完上面的工作已经完成了整个作业。其实不是的。你尝试使用firefox浏览，就会发现，代码并不会执行。显然，这是因为firefox不支持event事件对象。为了做到跨浏览器，不得不将代码进行优化。我们可以这个做：
首先，为boby添加一个onkeydown监控函数，如<body onkeydown="BindEnter(event)">。其次修改原来的绑定函数为：
function BindEnter(obj)
{ //使用document.getElementById获取到按钮对象
var button = document.getElementById('test');
if(obj.keyCode == 13)
{
button.click();
obj.returnValue = false;
}
} 为什么要将事件对象作为参数传递呢？这是为了避免进行浏览器判别，节省代码。 OK，到这里已经基本完成了。完整代码如下：
<html>
<head>
<title>测试绑定enter</title>
<script type="text/javascript"> function b_onclick() { alert("你好！"); } function BindEnter(obj) {
//使用document.getElementById获取到按钮对象
var button = document.getElementById('test');
if(obj.keyCode == 13)
{ button.click();
obj.returnValue = false;
}
}
</script>
</head>
<body onkeydown="BindEnter(event)">
<input type="button" value="测试按钮" id="test" onclick="b_onclick()" /> </body> </html>
js监听回车事件的更多相关文章
- 原 JS监听回车事件
原 JS监听回车事件 发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
- form表单回车提交问题,JS监听回车事件
我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...
- JavaScript监听回车事件
记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...
- JavaScript 监听回车事件
JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(event) { if (event.keyCode == "13& ...
- 两种js监听滚轮事件的方式
前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...
- EditText 监听回车事件 避免2次触发
// 侦听回车事件 EidtText txtSN = (EditText) findViewById(R.id.txtSN); txtSN.setOnEditorActionListener(new ...
- js 监听后退事件及跳转页面
//直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window. ...
- Js实现回车登录，监听回车事件
需求 项目有个回车登录功能,在此记录下 实现 我们应该监听当前登录页面的所有回车操作. $("body").keydown(function () { var yzmStatus ...
- js监听滚动条事件
(function () { if(document.addEventListener){ document.addEventListener('mousewheel',scrollFunc,fals ...
随机推荐
- [Locked] Two Sum
Two Sum II - Input array is sorted Given an array of integers that is already sorted in ascending or ...
- 配置Chrome启动参数支持本地AJAX请求，解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题
直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...
- 金牌分析师助力 鲁泰A图谋再造一个“鲁泰”？_财经_中国网
金牌分析师助力 鲁泰A图谋再造一个"鲁泰"?_财经_中国网 金牌分析师助力 鲁泰A图谋再造一个"鲁泰"?
- 武汉Uber优步司机奖励政策（1月18日~1月24日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 函数调用和给对象发消息（Runtime理解）
在写代码的时候这个差距其实是不打看的出得,很多时候也就无所谓叫什么,很多人为了便于理解,干脆就叫函数调用.这个其实应该是oc的一个特色,消息发送.具体的类typedef struct objc_cla ...
- spring mvc mybatis
Spring与Mybatis整合需要引入一个mybatis-spring.jar包,该整合包有Mybatis提供,可以从Mybatis官网下载. 该jar包提供了几个API: 1.SqlSession ...
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- NOI2015 软件包管理器 manager
显然链剖 然而只询问到根的信息,不用管lca,要好些很多(虽然我没那么写) 对于安装 查询和维护到根路径 对于卸载 查询和维护子树信息 因为链剖本身是用dfs序建的线段树,所以使得查询和修改子树非常方 ...
- mongoDB的基本使用----飞天博客
Mongo的介绍:这个mongoDB官网说的好啊,MongoDB是一个开源的基于document的数据库,并且是优秀的NoSQL数据库,并且它是用C++写滴哈,非常有效率.一些什么特点呢? 全索引支持 ...
- Java数学表示式解析工具- jeval
这个包能够为我们提高高效的数学表达式计算. 举个样例:这个是我们策划给出的游戏命中率的一部份计算公式 是否命中=a命中率 – (b等级 – a等级) * (命中系数(6)* b闪避率 / 100)+3 ...