快捷導(dǎo)航

js 實(shí)現(xiàn)驗(yàn)證碼輸入框示例詳解

更新時(shí)間：2022年09月21日 11:09:24 作者：名字起太長(zhǎng)會(huì)有傻子跟著念

這篇文章主要為大家介紹了js 實(shí)現(xiàn)驗(yàn)證碼輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

驗(yàn)證碼輸入框應(yīng)該是很常見的需求吧，不知道各位小伙伴在在遇到的時(shí)候是選擇找一找插件還是自己動(dòng)手?jǐn)]一個(gè)呢？我花了點(diǎn)時(shí)間擼了一個(gè)出來(lái)，實(shí)際體驗(yàn)還不錯(cuò)，分享給大家。

思路

我在實(shí)現(xiàn)之前肯定也是上網(wǎng)搜了一下的，網(wǎng)上的方式大多是使用多個(gè)input標(biāo)簽來(lái)實(shí)現(xiàn)，但我覺(jué)得不太優(yōu)雅，就自己想了一個(gè)方法。使用了6個(gè)div標(biāo)簽和一個(gè)input標(biāo)簽。驗(yàn)證碼長(zhǎng)度一般是4位或6位，我這里用6位做演示。

先將6個(gè)div使用flex布局平鋪。
再將input使用絕對(duì)定位覆蓋在6個(gè)div上面。
監(jiān)聽input元素的input、focus、blur事件，對(duì)用戶的輸入進(jìn)行處理。

遇到的問(wèn)題

上述布局在pc端是ok的，但是在移動(dòng)端會(huì)有問(wèn)題，移動(dòng)端的光標(biāo)底部會(huì)有個(gè)控件，你能夠拖動(dòng)調(diào)整光標(biāo)位置。大概長(zhǎng)這個(gè)樣子，如下圖：

不過(guò)解決方法也很簡(jiǎn)單，紅色背景是box，藍(lán)色背景是input

input寬度設(shè)置大一點(diǎn)，同時(shí)使用position: absolute; right: 0; top: 0;右對(duì)齊
box設(shè)置overflow: hidden;將左側(cè)多余部分隱藏，這樣就看不到光標(biāo)啦。

為了方便理解，我將top設(shè)置為48px，如下圖

實(shí)際應(yīng)該是top: 0，如下圖

下面是代碼，聰明的你一看就明白。

HTML

<div class="box">
    <div class="field-list">
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
        <div class="field-item"></div>
    </div>
    <input class="field-input" type="text" maxlength="6">
</div>

CSS

.box {
    position: relative;
    width: 338px;
    overflow: hidden;
}
.field-list {
    display: flex;
    justify-content: space-between;
}
.field-item {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    line-height: 46px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.field-item-focus {
    border-color: #409EFF;
}
.field-item-focus::before {
    content: '';
    display: block;
    width: 2px;
    height: 30px;
    margin: 8px auto;
    background: skyblue;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}
.field-input {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% + 60px);
    height: 48px;
    padding: 0;
    border: none;
    outline: none;
    opacity: 0;
    background: transparent;
}

JS

// 獲取dom
const fieldList = document.querySelectorAll('.field-item');
const fieldInput = document.querySelector('.field-input');
// 監(jiān)聽input輸入事件，只支持輸入數(shù)字，過(guò)濾非數(shù)字字符
fieldInput.addEventListener('input', function (e) {
    const v = e.target.value.replace(/[^\d]/g, '');
    e.target.value = v;
    // 考慮粘貼情況，循環(huán)賦值
    for (let i = 0; i < 6; i++) {
        fieldList[i].innerHTML = v[i] || '';
    }
    // 移除舊光標(biāo)
    removeCursor();
    // 計(jì)算新光標(biāo)出現(xiàn)位置
    calcCursorPosition();
});
// focus
fieldInput.addEventListener('focus', function (e) {
    calcCursorPosition();
});
// blur
fieldInput.addEventListener('blur', function (e) {
    removeCursor();
});
// 計(jì)算光標(biāo)出現(xiàn)位置
function calcCursorPosition() {
    const length = fieldInput.value.length;
    if (length < 6) {
        fieldList[length].classList.add('field-item-focus');
    }
}
// 移除光標(biāo)
function removeCursor() {
    // 最后一位沒(méi)有光標(biāo)，?.操作符避免報(bào)錯(cuò)
    document.querySelector('.field-item-focus')?.classList.remove('field-item-focus');
}

實(shí)現(xiàn)效果