密码框自动切换焦点

来源：互联网发布：pp手机助手 mac 编辑：程序博客网时间：2024/05/22 05: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();}

阅读全文

1 0