js+css实现自聚焦数字验证码输入框代码-html代码-BFW代码库

js+css实现自聚焦数字验证码输入框代码

代码语言：html

代码描述：js+css实现自聚焦数字验证码输入框代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --backdrop: linear-gradient(to left bottom,#d87a00,#f46246,#fa557c,#e75eaf,#bc74d7,#9487eb,#6197f4,#00a3f3,#00afed,#00b9e0,#00c0cf,#2ac6bc);
    --iptItemHeight: 65px;
    --BoxW: 700px;
    --iptItemBox: #000;
    --iptItemActivate: #fff;
    --textbox: #000;
    --textColor: #000
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: var(--backdrop);
    background-size: 200%;
    animation: bgAnimation 30s linear infinite;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@keyframes bgAnimation {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

.aiptWrapBox {
    width: var(--BoxW);
    height: var(--iptItemHeight)
}

.iptWrap {
    position: relative;
    width: var(--itemW);
    float: left
}

.iptHidden {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: var(--itemW);
    opacity: 0
}

.iptContent {
    display: flex
}

.iptItem {
    width: 50px;
    height: 65px;
    border-radius: 6px;
    border: 2px solid var(--iptItemBox);
    margin: 0 10px;
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.iptItem.active {
    border-color: #fff;
    border: 2px solid var(--iptItemActivate)
}

.iptItem.active::after {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #fff;
    animation: flicker .5s linear infinite alternate
}

@keyframes flicker {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.iptFigureBox {
    float: left;
    width: var(--iptFigureBoxW);
    height: var(--iptItemHeight);
    border: 4px solid var(--textbox);
    border-radius: 6px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center
}

.iptFigure {
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: var(--textColor);
    cursor: pointer
}


</style>
    </head>
    <body>

        <div class="aiptWrapBox">
            <div class="iptWrap">
                <input type="text" class="iptHidden">
                <div class="iptContent">
                    <p class="iptItem"></p>
                    <p class="iptItem"></p>
                    <p class="iptItem"></p>
                    <p class="iptItem"></p>
                    <p class="iptItem"></p>
                    <p class="iptItem"></p>
                    <p class="iptItem"></p>
                </div>
       .........完整代码请登录后点击上方下载按钮下载查看