如何在网页中绑定回车键事件
1个回答
展开全部
标题通俗的说，也就是绑定当用户按下回车键要执行的事件。解决方法比较简单，很多人都知道，本不应献丑的，但由于前几天的开发中有这个需求，做出来后觉得还是挺实用的，故还是记录下来。
在介绍本方法前，应该先说明，除了本方法外，其实还可以通过设定按钮的焦点的方法来绑定回车事件的，不过这不属于本文范围，故避开不谈。下面，入正题。
第一步，先编写简单的页面代码，这里我们只需要一个按钮就足够了。当然，还有按钮事件。
<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();
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();
<input type="button" value="测试按钮" id="test" onclick="b_onclick()" /</body</html水平有限，如有错漏，还请指正。
在介绍本方法前，应该先说明，除了本方法外，其实还可以通过设定按钮的焦点的方法来绑定回车事件的，不过这不属于本文范围，故避开不谈。下面，入正题。
第一步，先编写简单的页面代码，这里我们只需要一个按钮就足够了。当然，还有按钮事件。
<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();
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();
<input type="button" value="测试按钮" id="test" onclick="b_onclick()" /</body</html水平有限，如有错漏，还请指正。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
