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

下面，入正题。

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

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

  2. form表单回车提交问题,JS监听回车事件

    我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...

  3. JavaScript监听回车事件

    记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...

  4. JavaScript 监听回车事件

    JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(event) { if (event.keyCode == "13& ...

  5. 两种js监听滚轮事件的方式

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...

  6. EditText 监听回车事件 避免2次触发

    // 侦听回车事件 EidtText txtSN = (EditText) findViewById(R.id.txtSN); txtSN.setOnEditorActionListener(new ...

  7. js 监听后退事件及跳转页面

    //直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window. ...

  8. Js实现回车登录，监听回车事件

    需求 项目有个回车登录功能,在此记录下 实现 我们应该监听当前登录页面的所有回车操作. $("body").keydown(function () { var yzmStatus ...

  9. js监听滚动条事件

    (function () { if(document.addEventListener){ document.addEventListener('mousewheel',scrollFunc,fals ...

随机推荐

  1. 动态规划——F 最大矩阵和

    Given a two-dimensional array of positive and negative integers, a sub-rectangle is any contiguous s ...

  2. 迷宫 maze

    1 #include <stdlib.h> #include <stdio.h> #define stackinitsize 50 #define stackincrement ...

  3. 安卓四大组件之一activity

    概要说明 Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播 ...

  4. vxworks获取系统时间编程

    #include<time.h> //头文件 unsigned int timeLen; struct timespec tp; struct tm timeBuffer; time_t ...

  5. 提升ReSharper和Visual Studio的性能

    转载 作者:赵青青        出处:http://www.cnblogs.com/zhaoqingqing/ 文章目录[点击展开](?)[+]   提升性能 我们不断地确保ReSharper的正常 ...

  6. 一个小程序，时间util

    比较时间,如果此时间是今天的显示时间点,今天以前显日期 public String getTime(Date time){               SimpleDateFormat dateFor ...

  7. iOS 关于枚举的使用

    枚举值 它是一个整形(int)  并且,它不参与内存的占用和释放,枚举定义变量即可直接使用,不用初始化. 在代码中使用枚举的目的只有一个,那就是增加代码的可读性. 使用: 枚举的定义如下: typed ...

  8. Xcode7连接网络设置

    XCode7连接互联网的时候需要再info.plist设置(之前版本都不需要)连接网络NSAppTransportSecurity  字典NSAllowsArbitraryLoads    布尔  Y ...

  9. scrollview中停止滚动的监听

    [补充]可以在主线程控制,特别注意 scrollView3.postDelayed(new Runnable() { @Override public void run() { scrollView3 ...

  10. Android MVC框架模式

    MCV  model view controller  模型-视图-控制写 M层:适合做一些业务逻辑处理,比如数据库存取操作,网络操作,复杂的算法,耗时的任务等都在model层处理. V层:应用层中处 ...