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 ...
随机推荐
- Velocity常用方法
1.字符串替换 replace#if($!{name} != '')#set($tempName = $!{name})#set($tempName = $tempName.Replace('abc' ...
- redis学习心得之二【redis主从配置】
在前一节我们已经实践启动了一个redis服务,我们将其作为主机,现为其创建一个从机作备份使用 1.复制一份配置出来为从机所用 ~$ cp redis/etc/redis.conf ...
- 其实H5制作就这样~
今天的H5技术越来越成熟了,H5制作变得越来越简单化,尤其是H5制作工具(http://wcd.im/?_ta=2787)领域,基本上已经形成一条比较完整的产业链,所以对当下的企业来说,如果仍未体验过 ...
- 《Java 并发编程实战》读书笔记之二：图文讲述同步的另一个重要功能：内存可见性
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17288243 加锁(synchronized同步)的功能不仅仅局限于互斥行为,同时还存在另 ...
- Windows的应用管理工具 PortableApps，Chocolatey和Ninite
以前为了让我的firefox变成portable的,我使用了PortableApps,它不只是做软件的绿色版,而且也是一个软件的管理平台,可以通过它来管理软件的更新,挺方便的. 前段时间试用Scrip ...
- xcode设置项目图标玻璃镜效果
xcode5中设置 ios6和ios7的适配一些小细节注意,ios6中图标会默认的设置玻璃镜效果 找到图片文件夹APPlcon中右侧设置中的有个iOS icon is pre-rend-rendere ...
- Windows下Postgre SQL数据库通过Slony-I 实现数据库双机同步备份
一. 我们要实现的环境是windows xp.windows2003上安装Postgre SQL数据库,实现目的是两台数据库服务器进行数据库同步,即数据库同步更新.删除.插入等对数据库的操作. 二. ...
- Hadoop HDFS (3) JAVA訪问HDFS
如今我们来深入了解一下Hadoop的FileSystem类. 这个类是用来跟Hadoop的文件系统进行交互的.尽管我们这里主要是针对HDFS.可是我们还是应该让我们的代码仅仅使用抽象类FileSyst ...
- 全球最低功耗蓝牙单芯片（DA14580）系统架构和应用开发框架分析
DA14580是Dialog公司研制的蓝牙单芯片,号称全球功耗最低,是TI CC2541的四分之一,是运动手环等穿戴类电子产品的常用芯片.但是DA14580的开发门槛不低,适合有蓝牙开发经验的团队来开 ...
- Linux & Mac curl 命令行使用——POST&GET
http提交一个表单,比較经常使用的是POST模式和GET模式 在curl的命令行下,GET模式什么option都不用.仅仅须要把变量写在url里面就能够了 比方: curl http://www.s ...