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 ...
随机推荐
- Java调用R（二）_JRI
推荐使用.相比RServe更灵活,效率更高. 基本步骤 1. R中需要安装rJava包. 2. 系统变量Path加上 C:\Program Files\R\R-3.0.1\bin\i386;C:\ ...
- 在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b
偶然在群里看到这个小题, 就用python做了做. 思路就是建一个够大的列表并初始化,把每个字符的asc码作为下标,存到列表里, 然后该位置的值就存字母的出现次数, 最后再迭代原字符串并判断列表值是否 ...
- Invocation of init method failed; nested exception is org.hibernate.HibernateException: could not instantiate RegionFactory [org.hibernate.cache.impl
严重: Exception sending context initialized event to listener instance of class org.springframework.we ...
- spring mvc使用ClassPathXmlApplicationContext或FileSystemXmlApplicationContext和XmlWebApplicationContext类的操作其中 XmlWebApplicationContext是专为Web工程定制的。
一.简单的用ApplicationContext做测试的话,获得Spring中定义的Bean实例(对象).可以用: ApplicationContext ac = new ClassPathXmlAp ...
- HDU 5119 Happy Matt Friends(dp+位运算)
题意:给定n个数,从中分别取出0个,1个,2个...n个,并把他们异或起来,求大于m个总的取法. 思路:dp,背包思想,考虑第i个数,取或者不取,dp[i][j]表示在第i个数时,异或值为j的所有取法 ...
- 最小圆覆盖 hdu 3007
今天学习了一下最小圆覆盖, 看了一下午都没看懂, 晚上慢慢的摸索这代码,接合着别人的讲解, 画着图跟着代码一步一步的走着,竟然有些理解了. 最小圆覆盖: 给定n个点, 求出半径最小的圆可以把这些点全部 ...
- Day4 - Python基础4 迭代器、装饰器、软件开发规范
Python之路,Day4 - Python基础4 (new版) 本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 ...
- C#中的占位符
当我们需要在屏幕上输出一句话的时候,如果不断的使用+来连接各个字符串,一是容易出错,二是代码显示的非常乱.这时候,占位符就能够发挥作用! 占位符: string name="张三" ...
- 基于CANVAS与MD5的客户端生成验证码
好久没写东西,工作太忙了!不想服务端请求太多,搞了个这玩意儿,不过项目中并不会用上,还是使用服务端生成的机制(会安全多少呢?):我就想问个问题,除了图像识别来破解这样的简单验证码外,针对我这种例子,可 ...
- ChesFrame框架介绍
一直以来想写一个框架,想达到的目的: 1.对曾经做过项目的总结 2.节约构建系统的成本,不用每次都从零开始做起 3.写框架并在使用中不断的完善框架,这也是个积攒过程. 经历了一个多月的时间,一个基本的 ...