标题通俗的说，也就是绑定当用户按下回车键要执行的事件。

下面，入正题。

第一步，先编写简单的页面代码，这里我们只需要一个按钮就足够了。当然，还有按钮事件。 <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监控回车事件的更多相关文章

  1. JS获取回车事件（兼容各浏览器）

    一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...

  2. js捕获回车事件，并且获取每一条输入内容

    <body> <div style="width: 200px; height: 20px;"> <textarea id="inputVa ...

  3. js 设置回车事件

    document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.argumen ...

  4. js按回车事件提交

    $(document).keyup(function (event) { if (event.keyCode == "13") { document.getElementById( ...

  5. easyui-combobox绑定回车事件注意事项

    回车事件的定义的位置必须是easyui-combobox数据加载的后面,才有效果. HTML文件: <select id="aucBrandNo" class="e ...

  6. 兼容IE与firefox火狐的回车事件(js与jquery)

    javascript 兼容IE与firefox火狐的回车事件 复制代码代码如下: <script language="javascript"> function key ...

  7. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  8. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  9. js登录页面的 回车事件

    js登录页面的 回车事件 js登录页面的 回车事件(2012-12-26 10:37:03)转载▼标签: jseventkey回车事件登录 分类: js.jquery  //回车事件 第一种docum ...

随机推荐

  1. 对MMU段式转换的理解

    本文将详细介绍MMU段式转换的过程,并在文末附上一篇讲MMU比较详细的文章.具体什么是MMU,什么时段是转换就不在本文讲了,直接戳文末的链接. 首先,进行段式转换的条件.我们要拥有一个虚拟地址,还有一 ...

  2. Java中的数据类型及相互转换方法

    本文主要讲解两个部分: 一.Java中的数据类型有哪些? 二.数字类型和字符串类型相互转换的方法? 一.Java中的数据类型有哪些: Java中的数据类型有:基本数据类型和引用数据类型: 基本数据类型 ...

  3. 《University Calculus》-chaper13-向量场中的积分-线积分

    线积分: 基于二重积分和三重积分的引入,我们对于线积分的引入过程将会轻车熟路. 对于一根不均匀密度的铜丝,我们如何求其总质量?如下图. 类似二重积分和三重积分的引入,我们首先基于实际问题给出黎曼和的形 ...

  4. BASH_SOURCE 用法

    参考 bash少见的用法 http://blog.csdn.net/wonderisland/article/details/22892759. 原有项目里自带的启动脚本用到了bash_source获 ...

  5. 再看C++引用类型

    之前弃用博客园的原因是其不支持markdown语法.到今天偶然进来试了一下,发现Markdown toggle原来是能支持的(不知道是不是因为它升级了),遂重新启用. 在一年前学C++的时候就对引用, ...

  6. POJ 3978 Primes(求范围素数个数)

    POJ 3978 Primes(求范围素数个数) id=3978">http://poj.org/problem? id=3978 题意: 给你一个区间范围A和B,要你求出[A,B]内 ...

  7. rsync是类unix系统下的数据镜像备份工具

    http://baike.baidu.com/view/1183189.htm   Ubuntu安装: sudo apt-get install rsync RedHat: yum install r ...

  8. android EditText中的inputType

    android 1.5以后添加了软件虚拟键盘的功能,所以在输入提示中将会有对应的软键盘模式 android中inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.这也大大 ...

  9. [转] C++指针加整数、两个指针相减的问题

    http://blog.csdn.net/onlyou930/article/details/6725051 说来惭愧,写C++有一段时间了.这个问题从来没有认真考虑过,此次标记于此: 考虑如下问题: ...

  10. Linux FTP YUM源搭建简单记录

    1. 挂载iso镜像,进入Packages目录下安装FTP服务 #rpm -ivh vsftpd-3.0.2-10.el7.x86_64.rpm 2. 修改vsftpd配置文件如下 [root@rus ...