SnippetUI
← Back to snippets

Поле ввода OTP

Интуитивно понятный компонент ввода 6-значного OTP, который автоматически фокусируется при вводе одного символа и возвращается к предыдущему полю с помощью Backspace. Также поддерживает вставку.

HTMLCSSJavaScript

Предварительный просмотр

Поле ввода 6-значного OTP. Ввод номера автоматически переходит к следующему полю.

Введите код подтверждения
Когда вы вводите номер, он автоматически перемещается в следующее поле.

Варианты использования и функции

  • Поток аутентификации: идеально подходит для ввода кода аутентификации по SMS/электронной почте, экранов двухфакторной аутентификации (2FA).

  • Поддержка вставки: при вставке чисел из буфера обмена они автоматически распределяются по каждому полю.

  • Оптимизация для мобильных устройств: inputmode="numeric" автоматически отображает цифровую клавиатуру на смартфонах.

  • Проверка: исключите нечисловые входные данные с помощью replace(/[^0-9]/g, ”)`.

##Точки дизайна и UX

  1. Размер коробки 52x60 пикселей: оптимальный размер для хорошей видимости и простоты сенсорного управления.

  2. transform: Scale(1.05) в фокусе: вы можете четко видеть, в какое поле в данный момент вводится информация.

  3. .filled класс: визуализируйте прогресс, изменив цвет границы заполненного поля.

Как настроить

OTP изменен на 4-значный.


{/* Уменьшите количество входных элементов до 4 */}

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

Изменить размер коробки


.otp-box { width: 44px; height: 52px; font-size: 1.25rem; }

Код реализации

<div class="otp-inputs" id="otp-inputs">

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

</div>



<style>
.otp-inputs { display: flex; gap: 0.75rem; }

.otp-box {

width: 52px; height: 60px;

background: rgba(255,255,255,0.06);

border: 2px solid rgba(255,255,255,0.12);

border-radius: 12px;

color: white;

font-size: 1.5rem;

font-weight: 700;

text-align: center;

outline: none;

transition: border-color 0.2s, background 0.2s, transform 0.1s;

}

.otp-box:focus { border-color: #6366f1; background: rgba(99,102,241,0.1); transform: scale(1.05); }

.otp-box.filled { border-color: rgba(99,102,241,0.5); }
</style>



<script>

(function() {

var inputs = Array.from(document.querySelectorAll('#otp-inputs .otp-box'));

inputs.forEach(function(input, i) {

  input.addEventListener('input', function(e) {

    var val = e.target.value.replace(/[^0-9]/g, '');

    e.target.value = val.slice(-1);

    if (val && i < inputs.length-1) inputs[i+1].focus();

    e.target.classList.toggle('filled', !!e.target.value);

  });

  input.addEventListener('keydown', function(e) {

    if (e.key==='Backspace' && !e.target.value && i>0) {

      inputs[i-1].focus(); inputs[i-1].value=''; inputs[i-1].classList.remove('filled');

    }

  });

  input.addEventListener('paste', function(e) {

    e.preventDefault();

    var text = (e.clipboardData || window.clipboardData).getData('text').replace(/[^0-9]/g, '');

    text.split('').forEach(function(ch, j) {

      if (inputs[i+j]) { inputs[i+j].value = ch; inputs[i+j].classList.add('filled'); }

    });

    var nextEmpty = inputs.findIndex(function(inp, j) { return j >= i && !inp.value; });

    if (nextEmpty !== -1) inputs[nextEmpty].focus();

  });

});

})();

</script>

Статус совместимости браузера

| Браузер | Статус совместимости |

|--------|-------|

| Хром 66+ | ✅ Полностью совместим |

| Firefox 63+ | ✅ Полностью совместим |

| Сафари 12+ | ✅ Полностью совместим |

| Край 79+ | ✅ Полностью совместим |

На мобильных устройствах inputmode="numeric" автоматически отображает цифровую клавиатуру, что значительно повышает удобство использования.