怎么在网页中绑定回车键事件

如何在网页中绑定回车键事件

网页添加回车事件,新手总会不理解，网上搜索了几个做个备份，让她们自己看去。

首先：

</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>

其次：

http://www.4ucode.com/Study/Topic/2101838

怎么在网页中绑定回车键事件

热点推荐