Элементы

Поле кода

Код подтверждения из нескольких ячеек: автопереход, вставка целиком, автозаполнение из SMS, значение в скрытом поле.

input-otp с версии 0.1.0 со скриптом

Примеры

Код из письма

<form action="#" method="post">
  <div class="field">
    <span class="field__label" id="otp-l1">Код подтверждения</span>
    <div class="otp" role="group" aria-labelledby="otp-l1" aria-describedby="otp-h1" data-ui-otp>
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 1 из 6">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 2 из 6">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 3 из 6">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 4 из 6">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 5 из 6">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 6 из 6">
      <input type="hidden" name="code">
    </div>
    <p class="field__hint" id="otp-h1">Шесть цифр из письма. Код можно вставить целиком.</p>
  </div>
</form>

Короткий код со ссылкой на комнату

PIN-код комнаты

<div class="field">
  <span class="field__label" id="otp-l2">PIN-код комнаты</span>
  <div class="otp" role="group" aria-labelledby="otp-l2" data-ui-otp>
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 1 из 4">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 2 из 4">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 3 из 4">
      <input class="otp__cell" type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 4 из 4">
    <input type="hidden" name="pin">
  </div>
</div>

Установка

bukatchuk-ui add input-otp

Вместе с компонентом установятся: tokens, fonts, base, core, field.

Файлы

Файл	Назначение
`input-otp.css`	стили
`input-otp.js`	скрипт
`example.html`	образец разметки, в проект не копируется
`input-otp.jinja.html`	вставка для Jinja

Клавиши

Клавиша	Действие
`0–9`	ввести цифру и перейти к следующей ячейке
`Backspace`	стереть и вернуться на ячейку назад
`← →`	перейти между ячейками
`Home / End`	первая и последняя ячейка
`Ctrl+V`	вставить код целиком

Макрос для Jinja

{#- Код подтверждения из length ячеек. Значение приходит в скрытом поле name. Нужен скрипт input-otp:
    без него ячейки не отправляются. mode='alnum' разрешает буквы. -#}
{% macro input_otp(name, label, length=6, hint=None, mode='digits', value='', id=None) -%}
{%- set oid = id or ('otp-' ~ name) -%}
<div class="field">
  <span class="field__label" id="{{ oid }}-l">{{ label }}</span>
  <div class="otp" role="group" aria-labelledby="{{ oid }}-l"{% if hint %} aria-describedby="{{ oid }}-h"{% endif %} data-ui-otp{% if mode == 'alnum' %} data-ui-otp-mode="alnum"{% endif %}>
    {%- for i in range(length) %}
    <input class="otp__cell" type="text" inputmode="{{ 'text' if mode == 'alnum' else 'numeric' }}" autocomplete="one-time-code" aria-label="Символ {{ loop.index }} из {{ length }}"{% if value and value[i] is defined %} value="{{ value[i] }}"{% endif %}>
    {%- endfor %}
    <input type="hidden" name="{{ name }}" value="{{ value }}">
  </div>
  {%- if hint %}
  <p class="field__hint" id="{{ oid }}-h">{{ hint }}</p>
  {%- endif %}
</div>
{%- endmacro %}