在网上注册信息时,常常输入一项信息后敲回车键,焦点会自动切换到下一个输入框中。今天练手正好做了一下这个小例子。
<html>
<head>
<title>change focus</title>
</head>
<body>
<form>
<table>
<tr>
<td>Username:</td><td><input id="username" /></td>
</tr>
<tr>
<td>Password:</td><td><input id="password" /></td>
</tr>
</table>
</form>
</body>
</html>
<script>
var usernameObj = document.getElementById("username");
usernameObj.onkeydown = function(event) {
e = event ? event :(window.event ? window.event : null);
// 按下回车键且输入框值非空时
if(e.keyCode==13 && usernameObj.value){
document.getElementById("password").focus();
}
}
</script>
上面代码中,首先获取到username的DOM结点对象,然后给username的DOM结点对象绑上keydown事件,让事件去捕获回车键事件,如果捕获到了,将焦点切换到下一个输入框。
上面的keydown事件指向的方法中,传入事件对象event
e = event ? event :(window.event ? window.event : null); 这一行解决了浏览器兼容问题
IE浏览器的话,会给事件方法传入当前事件,也就是说IE浏览器下面,这个event是会被传入的;到了非IE浏览器,没有event的传入,那么e 会等于(window.event ? window.event : null) 即window.event ,这便获取到了非IE浏览器的事件对象。
然后判断事件的keyCode 是否等于13 ,keyCode等于13,则表明该事件为回车键,按下回车键时,且输入框中有输入值,将焦点聚焦到下一个输入框中。
上面的代码中,我们将事件的绑定放到了script脚本部分,也可以将事件绑定到HTML元素中,在script中声明事件处理方法即可。
<html>
<head>
<title>change focus</title>
</head>
<body>
<form>
<table>
<tr>
<td>Username:</td><td><input id="username" οnkeydοwn="changeFocus(event)" /></td>
</tr>
<tr>
<td>Password:</td><td><input id="password" /></td>
</tr>
</table>
</form>
</body>
</html>
<script>
function changeFocus(event) {
e = event ? event :(window.event ? window.event : null);
// 按下回车键且输入框值非空时
if(e.keyCode==13 && document.getElementById("username").value){
document.getElementById("password").focus();
}
}
</script>
这种写法同上面的方法同样的效果。