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

下面,入正题。

第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了。当然,还有按钮事件。 <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. FZU 2113 Jason的特殊爱好

    题意: 给定区间[a,b],求将区间中所有数写在黑板上,要写的数字‘1’的次数.(1 <= a,b <= 10^8) 解法: 将题转化成f(b+1) - f(a)的形式.普通的数位DP. ...

  2. zoj 3365 灵活数字规律

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3365 #include <cstdio> #incl ...

  3. Solr和ES对比

    Solr与ES(ElasticSearch)对比 搜索引擎选择: Elasticsearch与Solr 搜索引擎选型调研文档 Elasticsearch简介* Elasticsearch是一个实时的分 ...

  4. 安卓在SQLiteOpenHelper类进行版本升级和降级

    一.升级(使用到onUpgrade()方法和onCreate()没有安装过才用到) 简单理一下思路:  v1.0 (也就是说第一次使用这软件,没有安装过 所有在onCreate() 方法里写代码)   ...

  5. tomcat绿色版及安装版修改内存大小的方法

    1.对于安装版,比较方便了,直接运行tomcat6w.exe,选择Java选项卡, 在这里,可以设置初始化内存,最大内存,线程的内存大小. 初始化内存:如果机器的内存足够大,可以直接将初始化内存设置为 ...

  6. 重启adb服务

    通过命令提示符的方式来重启ADB服务的步骤如下: 1.输入adb kill-server并按下Enter键. 2.输入adb start-server并按下Enter键. 这样将会顺利地关闭ADB服务 ...

  7. lnux内核的malloc实现(Oracle的cache buffer影子)

    lnux内核的malloc实现(Oracle的cache buffer影子) 本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/artic ...

  8. fluentd结合kibana、elasticsearch实时搜索分析hadoop集群日志<转>

    转自 http://blog.csdn.net/jiedushi/article/details/12003171 Fluentd是一个开源收集事件和日志系统,它目前提供150+扩展插件让你存储大数据 ...

  9. 数据库内存泄漏——A SQLiteConnection object for database '/data/data/.../databases/....db' was leaked!

      详细异常: A SQLiteConnection object for database '/data/data/.../database/....db' was leaked!  Please ...

  10. Android 环境下编译FFmpeg

    Android 环境下编译FFmpeg 开发环境:Ubuntu 12.04.2 LTS , android-sdk-linux, android-ndk-r8e 一 .X264 编译 1.    X2 ...