密码框自动切换焦点

最新推荐文章于 2023-11-23 13:04:56 发布

原创最新推荐文章于 2023-11-23 13:04:56 发布 · 779 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 高级程序设计专栏收录该内容

29 篇文章

订阅专栏

主要功能描述如下：

1）输入当前一个数字后，焦点自动跳到一个input输入框

2）按退格键，如果当前内容是空的，则跳到上一个input输入框，并清空内容

非空的话，就清空内容即可

样式神马的，就自己改改就好了。实际使用的时候，input type="password" 较为方便一点

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>filter input</title>
	<link rel="stylesheet" type="text/css" href="./test.css"/>
</head>
<body>
	<div class="password-container">
		<h1>Please input your password</h1>
		<div class="password-list">
			<input type="text" maxlength="1"/>
			<input type="text" maxlength="1"/>
			<input type="text" maxlength="1"/>
			<input type="text" maxlength="1"/>
			<input type="text" maxlength="1"/>
			<input type="text" maxlength="1"/>
		</div>
	</div>

	<script type="text/javascript" src="./test.js"></script>
</body>
</html>

css

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Helvetica;
}

h1 {
	font-size: 100%;
	font-weight: normal;
}

.password-list {
    font-size: 0;
    text-align: center;
}

.password-list input {
    display: inline-block;
    border: 1px solid #c1c1c1;
    outline: none;
    width: 13vw;
    height: 12vw;
    text-align: center;
    font-size: 18px;
    border-right: none;
}

.password-list input:last-child {
	border-right: 1px solid #c1c1c1;
}

js部分

有一点需要注意的就是，按退格键时，需要监听keydown事件来判断内容，

否则内容清空之后，再判断没有意义。因此需要同时注册keydown事件。

function bindKeyEvent() {
	var password = document.querySelector(".password-list");
	password.onkeyup = function (event) {
		event = event || window.event;
		tabForward(event);
	}

	password.onkeydown = function (event) {
		tabBackward(event);
	}
}


function tabForward(event) {
	var target = event.target || window.event.srcElement;
	if(target.nextElementSibling && event.keyCode != 8) {
		target.nextElementSibling.focus();
	}
}


function tabBackward(event) {
	var target = event.target || window.event.srcElement;
	if(target.previousElementSibling && 
		event.keyCode == 8 &&
		target.value == "") {
		target.previousElementSibling.value = "";
		target.previousElementSibling.focus();
	}
}

window.onload = function (event) {
	bindKeyEvent();
}