快捷導(dǎo)航

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

更新時間：2022年09月21日 11:09:24 作者：名字起太長會有傻子跟著念

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

前言

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

思路

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

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

遇到的問題

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

不過解決方法也很簡單，紅色背景是box，藍色背景是input

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

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

實際應(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ù)字，過濾非數(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();
    // 計算新光標(biāo)出現(xiàn)位置
    calcCursorPosition();
});
// focus
fieldInput.addEventListener('focus', function (e) {
    calcCursorPosition();
});
// blur
fieldInput.addEventListener('blur', function (e) {
    removeCursor();
});
// 計算光標(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() {
    // 最后一位沒有光標(biāo)，?.操作符避免報錯
    document.querySelector('.field-item-focus')?.classList.remove('field-item-focus');
}

實現(xiàn)效果