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获取回车事件（兼容各浏览器）
一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...
- js捕获回车事件，并且获取每一条输入内容
<body> <div style="width: 200px; height: 20px;"> <textarea id="inputVa ...
- js 设置回车事件
document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.argumen ...
- js按回车事件提交
$(document).keyup(function (event) { if (event.keyCode == "13") { document.getElementById( ...
- easyui-combobox绑定回车事件注意事项
回车事件的定义的位置必须是easyui-combobox数据加载的后面,才有效果. HTML文件: <select id="aucBrandNo" class="e ...
- 兼容IE与firefox火狐的回车事件(js与jquery)
javascript 兼容IE与firefox火狐的回车事件 复制代码代码如下: <script language="javascript"> function key ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- 原 JS监听回车事件
原 JS监听回车事件 发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
- js登录页面的 回车事件
js登录页面的 回车事件 js登录页面的 回车事件(2012-12-26 10:37:03)转载▼标签: jseventkey回车事件登录 分类: js.jquery //回车事件 第一种docum ...
随机推荐
- Piotr's Ants UVa 10881
#include <cstdio> #include <cmath> #include <algorithm> #include <iostream> ...
- Apache-Tika解析Word文档
通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理Word格式的文章,如下: package com.mengyao.tika.app; i ...
- Count the string - HDU 3336（next+dp）
题目大意:给你一个串求出来这个串所有的前缀串并且与前缀串相等的数量,比如: ababa 前缀串{"a", "ab", "aba", &quo ...
- Web前端之HTML
一. HTML介绍: 1.HTML:超文本标记语言. 2.HTML是由:标签和内容构成. 3.程序语言有两种:解释性语言(HTML.PHP.Python.Javascript)和编译型语言(C.C++ ...
- 谈NOT IN和Exists
表1: test001 select * from test001
- Android（java）学习笔记227：服务（service）之服务的生命周期 与 两种启动服务的区别
1.之前我们在Android(java)学习笔记171:Service生命周期 (2015-08-18 10:56)说明过,可以回头看看: 2.Service 的两种启动方法和区别: (1)Servi ...
- ubuntu 连接 mssql <转>
转自 http://www.sendong.net/thread-90941-1-1.html 在linux下连接MSSQL,因为微软同志没有提供任何接口给开发人员,大约他们认为要用MSSQL的,只 ...
- angularjs项目中关于服务的应用
/** *普通ajax请求公共服务 */ mainModule.factory('myService',function($http,$q){ var service = {}; var baseUr ...
- Wpf Binding.Path设置
Binding.Path 获取或设置绑定源属性的路径. 每个绑定通常都具有四个组件:绑定目标对象.目标属性.绑定源,以及要使用的绑定源值的路径.有关这些数据绑定概念的更多信息,请参见数据绑定概述. 使 ...
- ManagementException：WMI异常处理介绍
.NET调用WMI后无论是同步调用还是异步调用,都会产生返回一个int类型的执行结果.如果成功,则返回0.如果不是0,则有对应错误码表示发生了什么错误. 根据咱们这个系列的博文,我总结了关于进程,服务 ...