在网页中绑定回车键事件
来源:互联网 发布:老挝语翻译器软件 编辑:程序博客网 时间:2024/05/16 05:19
如何在网页中绑定回车键事件
通俗的说,也就是绑定当用户按下回车键要执行的事件。解决方法比较简单,很多人都知道,本不应献丑的,但由于前几天的开发中有这个需求,做出来后觉得还是挺实用的,故还是记录下来。
在介绍本方法前,应该先说明,除了本方法外,其实还可以通过设定按钮的焦点的方法来绑定回车事件的,不过这不属于本文范围,故避开不谈。下面,入正题。
第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了。当然,还有按钮事件。
html
head
title测试绑定entertitle
script type=textjavascript
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测试绑定entertitle
script type=textjavascript
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
水平有限,如有错漏,还请指正。
- 如何在网页中绑定回车键事件
- 如何在网页中绑定回车键事件
- 在网页中绑定回车键事件
- 网页制作之绑定回车键
- jQuery回车键绑定点击事件
- 在asp.net 页面中,点击回车键触发Button事件
- .NET2005中在文本框中按下回车键触发提交事件
- ASP.NET 回车键绑定按钮事件
- js input绑定enter回车键事件
- 如何:在 ASP.NET 网页中对事件处理程序进行运行时动态绑定
- 在Gridview中绑定网页传值
- 回车键绑定
- 在GridView_RowDataBound事件中绑定列
- JQuery在循环中绑定事件
- JavaScript 在for循环中绑定事件
- WPF 在事件中绑定命令
- 在ES6类中绑定事件
- js 在循环中绑定事件
- firefox源码分析 (还是不建议用余学习C++)
- 自己写的简单大方的树形导航菜单
- 11 02 25 终于搞定了一个
- 银行黑客那些事
- java 获取文件路径
- 在网页中绑定回车键事件
- 锁事
- NET平台下的IP欺骗和SYN Flood攻击
- url传递中文字符串的解决方案
- ASP.NET MVC 入门1、简介
- 深入理解grep和find命令
- Windows系统下三十款优秀开源软件
- 11 02 24 连续上班
- 力求改变,给自己多一点,再多一点的挑战-我的年度规划2011.2.25