js监听回车事件

时间 2019-11-29

标签监听回车事件栏目 JavaScript 繁體版

原文原文链接

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

下面，入正题。html

第一步，先编写简单的页面代码，这里咱们只须要一个按钮就足够了。固然，还有按钮事件。 <html> java

<head>浏览器

<title>测试绑定enter</title> 函数

function b_onclick() { alert("你好！"); } 优化

</script> spa

</head> firefox

<body> htm

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

//使用document.getElementById获取到按钮对象

var button = document.getElementById('test');

if(obj.keyCode == 13)

{ button.click();

obj.returnValue = false;

}

</script>

</head>