js 實現驗證碼輸入框範例詳解

2022-09-24 14:01:30

前言

驗證碼輸入框應該是很常見的需求吧，不知道各位小夥伴在在遇到的時候是選擇找一找外掛還是自己動手擼一個呢？我花了點時間擼了一個出來，實際體驗還不錯，分享給大家。

思路

我在實現之前肯定也是上網搜了一下的，網上的方式大多是使用多個input標籤來實現，但我覺得不太優雅，就自己想了一個方法。使用了6個div標籤和一個input標籤。驗證碼長度一般是4位元或6位，我這裡用6位做演示。

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

遇到的問題

上述佈局在pc端是ok的，但是在行動端會有問題，行動端的遊標底部會有個控制元件，你能夠拖動調整遊標位置。大概長這個樣子，如下圖：

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

input寬度設定大一點，同時使用position: absolute; right: 0; top: 0;右對齊
box設定overflow: hidden;將左側多餘部分隱藏，這樣就看不到遊標啦。

為了方便理解，我將top設定為48px，如下圖

實際應該是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');
// 監聽input輸入事件，只支援輸入數位，過濾非數位字元
fieldInput.addEventListener('input', function (e) {
    const v = e.target.value.replace(/[^d]/g, '');
    e.target.value = v;
    // 考慮貼上情況，迴圈賦值
    for (let i = 0; i < 6; i++) {
        fieldList[i].innerHTML = v[i] || '';
    }
    // 移除舊遊標
    removeCursor();
    // 計算新遊標出現位置
    calcCursorPosition();
});
// focus
fieldInput.addEventListener('focus', function (e) {
    calcCursorPosition();
});
// blur
fieldInput.addEventListener('blur', function (e) {
    removeCursor();
});
// 計算遊標出現位置
function calcCursorPosition() {
    const length = fieldInput.value.length;
    if (length < 6) {
        fieldList[length].classList.add('field-item-focus');
    }
}
// 移除遊標
function removeCursor() {
    // 最後一位沒有遊標，?.操作符避免報錯
    document.querySelector('.field-item-focus')?.classList.remove('field-item-focus');
}

實現效果

以上就是js 實現驗證碼輸入框範例詳解的詳細內容，更多關於js 驗證碼輸入框的資料請關注it145.com其它相關文章！

js 實現驗證碼輸入框範例詳解

目錄

前言

思路

遇到的問題

HTML

CSS

JS

熱門文章