day41-Verify Account Ui（短信验证码小格子输入效果）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day41-Verify Account Ui（短信验证码小格子输入效果）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Verify Account</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <h2>验证您的帐户</h2>
        <p>我们给你发了六位数的验证码到cool_guy@email.com<br /> 输入下面的验证码来确认您的电子邮件地址。</p>
        <!-- 验证码容器 -->
        <div class="code-container">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
        </div>
        <small class="info">
            这只是设计。我们没有给你发邮件，因为我们没有你的邮箱，对吧?
        </small>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: #fbfcfe;
    font-family: 'Muli', sans-serif;
    /* 子元素居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 大盒子容器 */
.container {
    background-color: #fff;
    border: 3px #000 solid;
    border-radius: 10px;
    padding: 30px;
    max-width: 1000px;
    text-align: center;
}

/* 验证码容器 */
.code-container {
    /* 居中向两边排列 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
}

/* input type="number" */
.code {
    border-radius: 5px;
    font-size: 75px;
    height: 120px;
    width: 100px;
    border: 1px solid #eee;
    /* 其所在容器宽度的 1%  6px*/
    margin: 1%;
    text-align: center;
    font-weight: 300;
    /* 该表单元素显示成类似于普通文本输入框的样式 */
    /* appearance: textfield; */
}

/* 隐藏输入框中的旋转箭头 */
/* 适用于 Chrome 和 Safari */
.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* 设置表单元素（类名为".code" ）在合法状态（valid）时的样式 */
.code:valid {
    border-color: #3498db;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}

/* 提示信息 */
.info {
    background-color: #eaeaea;
    display: inline-block;
    padding: 10px;
    line-height: 20px;
    max-width: 400px;
    color: #777;
    border-radius: 5px;
}

/* <=600px时，的效果 */
@media (max-width: 600px) {
    .code-container {
        flex-wrap: wrap;
    }

    .code {
        font-size: 60px;
        height: 80px;
        max-width: 70px;
    }
}

script.js


// 重点 flex .code:valid
// 1.获取元素节点
const codes = document.querySelectorAll('.code'); // 所有的验证码数字
const collectedCodes = []; // 用于收集code的值的数组

// 自动聚焦于验证码第一个数字
codes[0].focus();

// 遍历 绑定键盘按下事件，判断输入的长度和值是否合法
codes.forEach((code, idx) => {
    code.addEventListener('keydown', (e) => {
        console.log(e.key);
        // 输入为0-9内的数字
        if (e.key >= 0 && e.key <= 9) {
            codes[idx].value = ''; // 更新输入框的值为空 目的是消除一个code填入多的数字
            // 光标聚焦于后一个数字 使用trycatch消除浏览器控制台报错
            setTimeout(() => {
                try {
                    codes[idx + 1].focus()
                } catch (error) {
                    console.log('已经位于最后一个数字');
                }
            }, 10);
            collectedCodes[idx] = e.key; // 收集code的值
        } else if (e.key === 'Backspace') { // 按下为删除键
            // 光标聚焦于前一个数字
            setTimeout(() => {
                try {
                    codes[idx - 1].focus()
                } catch (error) {
                    console.log('已经位于第一个数字');
                }
            }, 10);
            collectedCodes[idx] = ''; // 删除的时候移除对应位置的code的值
        }
        // 在任何需要的时候可以使用 collectedCodes 数组获取收集到的 code 的值
        console.log(collectedCodes);
    });
});