按回车键切换焦点

最新推荐文章于 2020-12-12 13:29:25 发布

姜小白-

最新推荐文章于 2020-12-12 13:29:25 发布

阅读量5.4k

点赞数 1

分类专栏： javascript 文章标签： JavaScript 回车键切换焦点 keyCode

本文链接：https://blog.csdn.net/magi1201/article/details/45177113

版权

javascript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

在网上注册信息时，常常输入一项信息后敲回车键，焦点会自动切换到下一个输入框中。今天练手正好做了一下这个小例子。

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

这种写法同上面的方法同样的效果。

姜小白-

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
按回车键切换焦点

在网上注册信息时，常常输入一项信息后敲回车键，焦点会自动切换到下一个输入框中。今天练手正好做了一下这个小例子。上面的keydown事件指向的方法中，传入事件对象evente = event ? event :(window.event ? window.event : null); 这一行解决了浏览器兼容问题 IE浏览器的话，会给事件方法传入当前事件，也就是说IE浏览器下面，这个event是会被传入的；到了非IE浏览器，没有event的传入，那么e 会等于(window.event ? wind
复制链接

扫一扫