Mask html input: html — Implement an input with a mask

Например, 123-456-7890

Например, 12345-6789[0-9]{5}(?:-[0-9]{4})?$» aria-describedby=»zipHint» />

Маска буквенно-цифрового ввода

<форма> буквенно-цифровой <ввод режим ввода = "текст" имя = "буквенно-цифровой" заполнитель = "___ ___" шаблон = "\ш\д\ш \д\ш\д" aria-describedby="буквенно-цифровая подсказка" кодировка данных = "А#А #А#" />

  
Маска ввода номера социального обеспечения
 
<форма>
  Номер социального страхования
  
Например, 123 45 6789(?!(000|666|9))\d{3} (?!00)\d{2} (?!0000)\d{4}$"
   
    ария-describedby="ssnHint"
  />

 
Маска ввода телефонного номера США
 
<форма>
  Номер телефона в США
  
Например, 123-456-7890
  <ввод
   
    тип = "тел"
    режим ввода = "числовой"
    имя = "тел"
    заполнитель = "___-___-____"
    шаблон="\d{3}-\d{3}-\d{4}"
   
    ария-describedby="telHint"
  />

 
Маска для ввода 9-значного почтового индекса США
 
<форма>
  Почтовый индекс
  
Например, 12345-6789[0-9]{5}(?:-[0-9]{4})?$"
   
    aria-describedby="zipHint"
  />

 
Маска буквенно-цифрового ввода
 
<форма>
  буквенно-цифровой
  
Например, A1B 2C3
  <ввод
   
    режим ввода = "текст"
    имя = "буквенно-цифровой"
    заполнитель = "___ ___"
    шаблон = "\ш\д\ш \д\ш\д"
   
    aria-describedby="буквенно-цифровая подсказка"
    кодировка данных = "А#А #А#"
  />
 

Руководство

Когда использовать компонент маски ввода

• Общие шаблоны ввода. В полях с определенным ожидаемым форматом, таким как номер социального страхования или почтовый индекс, маска ввода позволяет ограничивать и формировать информацию, вводимую в этом формате, без ущерба для возможности пользователя копировать/вставлять или исправлять опечатки.

Когда подумать о чем-то другом

• Когда для ввода требуется поле произвольной формы. Если нет общего шаблона ввода, маскирование ввода не подходит.
• Когда шаблон слишком сложен для допустимой маски ввода. Такой шаблон, как электронная почта, с множеством возможных сценариев ввода, не является хорошим кандидатом для маскировки. Разрешите пользователю ввести свой адрес электронной почты (или другие сложные данные) и получите подтверждение вашей библиотеки проверки перед отправкой формы.

Руководство по использованию

• Дождитесь подтверждения. Показывать сообщения или стили проверки ошибок только после взаимодействия пользователя с определенным полем.

Доступность

• Включите этикетку. Убедитесь, что каждый элемент управления формы содержит метку с атрибутом для , связанным с id элемента ввода , который он помечает.
• Используйте полезный текст подсказки. Убедитесь, что любой текст подсказки помогает пользователям понять, что им нужно ввести.
• Персонализация. При настройке обязательно соблюдайте рекомендации по специальным возможностям для шаблонов форм и рекомендации по специальным возможностям для элементов управления форм.

Использование компонента маски ввода

Примеры в разделе «Предварительный просмотр» выше представляют собой обычные маски ввода, но вы можете адаптировать код в соответствии с потребностями вашего проекта. Чтобы расширить функциональность маски ввода, вы должны включить атрибут -заполнитель в качестве видимой маски ввода, используя символ подчеркивания _ для представления символа, который должен ввести пользователь. Вы можете использовать литералы пунктуации, такие как [пробел] , - , / или

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

 placeholder="___ ___ ___"
шаблон="\д\д\д \д\д\д \д\д\д"
режим ввода = "числовой"
 

Маска ввода и буквенно-цифровые символы

Примеры маски ввода включают буквенно-цифровую версию, которую можно настроить в соответствии с вашими потребностями.

Чтобы реализовать буквенно-цифровую маску ввода, вам нужно будет добавить атрибут data-charset к входному тегу. Похож на 9Атрибут шаблона 0062 включает числовой знак # для каждого числа и A для каждой требуемой буквы. Мы рекомендуем изменить режим ввода на text , чтобы пользователю была доступна вся клавиатура.

Если ваша маска ввода требует шаблона, такого как 1A2 B3C , вы должны реализовать это, добавив следующие атрибуты и форматирование символов к элементу ввода:

 placeholder="___ ___"
шаблон = "\ш\д\ш \д\ш\д"
кодировка данных = "А#А #А#"
 

Настройки маски ввода

Этот компонент не имеет настроек.

Варианты маски ввода

Этот компонент не имеет вариантов.

Упаковка

• Использование пакета: @forward "usa-input-mask";

Последние обновления

Значимые коды и обновления инструкций перечислены в следующей таблице:

Дата	Версия USWDS	Воздействует на	Взлом	Описание
2022-11-14	3. 3.0	Руководство JavaScript Разметка Стили	Нет	Компонент выпущен. Больше информации: uswds#4884

Mask Input

Посмотреть цены →

• Введение
• Основной пример
• маски
  • встроенные токены
  • Escaping Linst-INS
• Режимы
  • Shift & Repect. Токены Char
  • Токены Enum
• Группы
  • Опции группы
• Префикс и суффикс
• Запуск маски в обратном порядке
• Значения маски
  • Неполные значения
  • . формат. При правильном использовании маска ввода может улучшить взаимодействие с пользователем, устранив любую двусмысленность для желаемого значения (например, номер телефона или номер социального страхования).

    Обзор ввода по маске

    2 мин.

    Пример загрузки в реальном времени

    Маска — это желаемый формат ввода. Он передается в реквизит mask , где он анализируется на наличие токенов. Маска состоит из:

    • Токенов — Строковое представление редактируемой пользователем области. Ниже показано белым цветом.
    • Строковые литералы — Любой символ, не являющийся токеном. Не редактируется пользователем. Ниже показано оранжевым цветом.

    Встроенные жетоны

    Маска ввода поставляется с 4 встроенными токенами:

    • h — принимает шестнадцатеричный символ ( 0-9a-fA-F ).
    • # — принимает цифровой символ.
    • a  — принимает алфавитный символ.
    • * — принимает любой символ.

    Пример загрузки в реальном времени

    Экранирование встроенных функций

    Если вам нужно использовать один из встроенных токенов в качестве строкового литерала в вашей маске, вы можете экранировать их с помощью \ . Здесь мы избегаем знака фунта # для использования в нашем шестнадцатеричном цвете:

    Маска ввода поддерживает 3 режима ввода:

    • Shift ( по умолчанию)
    • Заменить
    • Выбрать

    Режим сдвига и замены

    По умолчанию символы маски автоматически сдвигаются вперед при вводе. Это заметно, когда маска уже заполнена, и вы помещаете курсор в начало ввода или рядом с ним и начинаете печатать. Символы, следующие за курсором, «смещаются» вперед по мере ввода. Однако в режиме замены последующие символы перезаписываются новым значением:

    Пример загрузки в реальном времени

    Режим выбора

    В режиме выбора эквивалентные маркеры типа char группируются в выбираемые текстовые диапазоны. FormKit автоматически выбирает эти текстовые диапазоны при нажатии или фокусировании ввода. Эти диапазоны выбора сохраняются по мере того, как пользователь печатает. При правильном использовании это создает четкий UX, поскольку пользователь знает, какое значение он должен ввести.

    Кроме того, когда вход находится в режиме выбора, пользователь может использовать клавиши со стрелками или клавиши табуляции для переключения фокуса с одного диапазона выбора на другой:

    Пример загрузки в режиме реального времени

    Выбор параметров режима

    Свойство токена selectDirection определяет направление нового символы переходят в выбранный диапазон. Вы можете заполнить «пустые» символы выбора заранее определенным значением (например, ведущими нулями «0») с помощью свойства selectFill . См. свойства токена.

    Создание новых токенов

    Что если шаблон может принимать буквы или цифры в одной и той же позиции? Создать новые токены относительно просто. Есть 2 типа жетонов:

    • символ принимает один символ.
    • enum принимает любые строки из массива возможных значений.

    Для создания нового маркера необходимо определить следующие свойства:

     { /** * Тип маркера. Может быть `char` или `enum`. */ type: 'char', /** * Токен, который нужно извлечь из маски. */ token: 'z', /** * Символ-заполнитель для отображения во входных данных, когда включена * `show-mask`. */ placeholder: '_', /** * При использовании режима `select` определяет, в каком направлении * вводятся новые символы. */ selectDirection: 'left', /** * (Только для типа `char`).  Регулярное выражение, описывающее типы символов *, которые могут появляться в этом слоте. Этот шаблон будет оцениваться * по отдельным символам, а не в контексте всей строки. */ шаблон: /[A-Za-z0-9]/, /** * (Только для типа `char`, необязательно). Необязательный символ для «заполнения» диапазона выбора * в режиме выбора. Например, selectFill, установленный на * "0", может быть полезен с числами для получения начальных нулей, таких как "001". */ selectFill: "0", /** * (Только для типа `enum`). Массив возможных значений. */ values: [ 'Март', 'Апрель', 'Май' ],} 

    Например, новый токен, который принимает буквы и цифры и представлен буквой z в строке маски, будет выглядеть так :

     { тип: 'char', токен: 'z', шаблон: /[A-Za-z0-9]/, заполнитель: '_', selectDirection: 'left',} 

    Заполнители не должны соответствовать шаблону

    Любой определяемый вами заполнитель не должен соответствовать шаблону Regex , указанному в определении токена.

    Добавить токены через реквизит

    Чтобы передать новый токен на ввод маски, вы можете использовать реквизит токенов , который ожидает объект с ключами, которые соответствуют свойству токена . Например, наш новый токен в приведенном выше примере можно применить напрямую:

    Пример загрузки в реальном времени

    Глобальное добавление токенов

    Чтобы зарегистрировать токены маски глобально, расширьте свойство config глобальной конфигурации FormKit:

    Пример загрузки в реальном времени

    Изменение токенов

    Токены prop также может изменять существующие токены. Любое значение, предоставленное реквизиту токенов , будет объединено с существующими токенами для этого ввода. Например, токен цифры ( # ) не имеет selectFill по умолчанию. Чтобы добавить один, просто расширьте его:

    Пример загрузки в реальном времени

    жетоны Char

    char токены принимают один символ. Чтобы символ был принят, он должен соответствовать регулярному выражению token.pattern . Четыре встроенных токена ( h , # , a и * ) представляют собой токены типа char .

    В выберите режим , char токены сгруппированы вместе в диапазон выбора.

    Заполнители

    Маркер char должен всегда представлять только 1 символ, а его заполнитель также должен быть длиной только в один символ.

    Токены перечисления

    Токены перечисления позволяют использовать маски переменной длины в рамках предопределенного набора параметров. Когда пользователь начнет вводить текст, значение токена перечисления изменится на первое совпадающее значение, а диапазон выбора будет отражать несопоставленные в данный момент символы. На практике это работает так же, как автозаполнение для этого конкретного токена. Кроме того, пользователи могут переключаться между доступными параметрами для данного токена, нажимая клавиши со стрелками вверх/вниз.

    Дата с автоматически заполняющимися названиями месяцев может быть хорошо представлена ​​с помощью перечислений:

    Пример загрузки в реальном времени

    Требование выбора режима

    Перечисления поддерживаются только в режиме выбора . Когда любой токен enum найден в строке маски, режим ввода принудительно устанавливается на select .

    Группы позволяют обрабатывать несколько символов маски как единое целое. Вы создаете группу, окружая нужные символы маски в {} :

    Сами по себе, группы ничего не делайте, пока не определите параметры группы.

    Параметры группы

    Параметры группы позволяют применить функциональность ко всей группе с помощью канала | , за которым следует имя параметра и любые аргументы. Доступны следующие варианты:

    • повтор — позволяет повторять группу бесконечное количество раз.
    • заполнитель — Символ для хранения пробела перед вводом пользователем.

    Заполнители группы

    Заполнитель, определенный в группе, имеет более высокую специфичность, чем заполнитель, определенный в определении токена, и переопределяет его.

    Параметры опции

    Аргументы можно передать групповой опции с помощью двоеточия, например, заполнитель:+ , где символ плюс + передается опции заполнителя .

    Вы можете сгруппировать параметры вместе:

    Пример загрузки в реальном времени

    Нельзя использовать в режиме выбора

    Группы нельзя использовать в режиме выбора. Будет выброшено исключение.

    Вы можете убедиться, что определенные символы всегда появляются в начале или в конце ввода, используя префикс и суффикс props соответственно: содержимое суффикса не может соответствовать маске. Например, если ваша маска имеет токен цифры # , ваш префикс/суффикс не может содержать цифры.

    В определенных обстоятельствах вы можете захотеть запустить маску в обратном направлении. Маска будет проверять, соответствует ли пользовательский ввод маске справа налево. Это распространено во входных данных валютного типа и может быть применено путем добавления реквизита reverse :

    Пример загрузки в реальном времени

    Требование к режиму сдвига

    Запуск маски в обратном направлении работает только в режиме сдвига.

    Неполные значения

    Значение маски не считается «полным», пока пользователь не заполнит весь шаблон. До этого момента FormKit будет считать значение ввода «пустым». Это делает его удобным для использования с такими правилами проверки, как требуется . Однако, если вы хотите принять неполные значения, вы можете сделать это с помощью свойства allow-incomplete :

    Пример загрузки в реальном времени

    Значения без маски

    По умолчанию значение ввода маски включает форматирование, предоставленное через маска проп. Однако, если вы хотите получить необработанное немаскированное значение с удаленными строковыми литералами, вы можете использовать реквизит unmask-value :

    Load Live Example

    По умолчанию маска 9Ввод 0063 отображает символ-заполнитель каждого токена. Вы можете отключить это поведение (кроме режима выбора), но при этом автоматически применять форматирование с помощью show-mask prop:

    Load Live Example

    По умолчанию значение маски отображается через значение ее элемента ввода. Хотя это работает «из коробки», теперь это позволяет стилистически различать текст. Например, было бы неплохо, если бы «буквальные» части маски выглядели иначе, чем части «заполнителя».

    Чтобы добиться этого эффекта, вы можете включить наложение , которое отображает элементы DOM, расположенные непосредственно над самим вводом. Текст внутри ввода все еще там, но он будет прозрачным. Как правило, необходимые стили позиционирования наложения применяются автоматически.

    Наложение содержит 4 возможных раздела, на которые вы можете нацелить свои стили:

    • Literal ( .formkit-overlay-literal или overlay-literal-class )
    • Заполнитель ( .formkit-overlay-placeholder или overlay-placeholder-class )
    • Enum ( .formkit-overlay-enum или overlay-enum-class

      3

    • 4
    • 4 overlay-char или overlay-char-class )

    Тема Genesis по умолчанию автоматически поддерживает наложение и применяет светло-серые цвета к заполнителю. Если вы не используете Genesis, убедитесь, что внутренняя секция

    расположена (например, позиция: относительная ).

    Load Live Example

    Prop	Type	Default	Description
    allow-incomplete	boolean	false	By default, the value of a mask input is empty until the узор завершен. Эта поддержка позволяет вводу использовать неполные значения.
    маска	строка	нет	Применяемая маска. Это строка, состоящая из токенов (например, «#») и буквенных строковых значений.
    режим	строка	сдвиг	Определяет, как работает ввод маски. Варианты: смена , заменить и выбрать .
    overlay	boolean	false	Визуализирует элементы DOM, которые имитируют ввод текста, чтобы можно было различать стилизацию маски.
    префикс	строка	нет	Символы, которые всегда будут появляться в начале ввода.
    reverse	boolean	false	Запускает маску в обратном порядке — справа налево.
    show-mask	boolean	true	Отображает живое представление заполнителя шаблона как внутреннее значение ввода.
    суффикс	строка	нет	Символы, которые всегда будут появляться в конце ввода.
    жетоны	Объект	{}	Добавьте новые токены или измените существующие.
    unmask-value	boolean	false	По умолчанию значение ввода совпадает с отображаемым (с форматированием). Строковые литералы будут удалены из значения, если для этого свойства установлено значение true.
    Показать универсальные реквизиты
    config	Объект	{}	Конфигурация этого узла ввода и любого потомка узла ввода и любого потомка узла ввода.
    задержка	Число	20	Количество миллисекунд, в течение которого необходимо устранить дребезг входного значения до отправки хука фиксации .
    dirtyBehavior	string	touched	Определяет, как устанавливается «грязный» флаг этого входа. Можно установить коснулся или сравнить — коснулся (по умолчанию) более производительный, но не будет обнаруживать, когда форма снова соответствует своему исходному состоянию.
    ошибки	Массив	[]	Массив строк для отображения в виде сообщений об ошибках в этом поле.
    help	String	''	Текст для текста справки, связанного с вводом.
    id	Строка	input_{n}	Уникальный идентификатор ввода. Предоставление идентификатора также позволяет получить глобальный доступ к входному узлу.
    игнорировать	Булево значение	false	Предотвращает включение ввода в какой-либо родительский элемент (группу, список, форму и т. д.). Полезно при использовании входных данных для пользовательского интерфейса вместо фактических значений.
    index	Number	undefined	Позволяет вставить ввод по заданному индексу, если родителем является список. Если значение ввода не определено, оно наследует значение из этой позиции индекса. Если у него есть значение, он вставляет его в значения списков по заданному индексу.
    label	String	''	Текст для элемента label , связанного с вводом.
    name	String	input_{n}	Имя ввода, указанное в объекте данных. Это должно быть уникальным в пределах группы полей.
    родитель	FormKitNode	контекстуальный	По умолчанию родителем является группа-оболочка, список или форма, но этот реквизит допускает явное назначение родительского узла.
    prefix-icon	String	''	Задает значок для помещения в раздел prefixIcon .
    сохранить	логическое значение	false	Сохраняет значение ввода в родительской группе, списке или форме при размонтировании ввода.
    save-errors	boolean	false	По умолчанию ошибки, установленные на входах с помощью setErrors , автоматически сбрасываются на входе, установка этого свойства в true поддерживает ошибку до тех пор, пока она не будет очищена явным образом.
    section-schema	Object	{}	Объект ключей разделов и частичных значений схемы, где каждая часть схемы применяется к соответствующему разделу.
    suffix-icon	String	''	Задает значок для помещения в раздел suffixIcon .
    type	String	text	Тип ввода для визуализации из библиотеки.
    проверка	строка, массив	[]	Правила проверки, применяемые к входным данным.
    validation-visibility	String	blur	Определяет, когда отображать неверные правила проверки ввода. Допустимые значения: blur , dirty и live .
    метка проверки	Строка	{label prop}	Определяет, какую метку использовать в сообщениях об ошибках проверки, по умолчанию используется label prop, если он доступен, в противном случае используется name prop.
    правила проверки	Объект	{}	Дополнительные пользовательские правила проверки, которые должны быть доступны для проверки.
    value	Any	undefined	Начальное значение ввода и/или его потомков. Не реактивный. Можно заполнять целые группы (формы) и списки.0062 :sections-schema ) или контент (через слоты). Подробнее о разделах читайте здесь. Введите номер телефона Поле ввода Пожалуйста, введите свой номер телефона. Требуется номер телефона. Ключ секции Описание внешний Крайний оберточный элемент. обертка Обертка вокруг этикетки и ввода. метка Метка входа. префикс По умолчанию не имеет вывода, но разрешает содержимое непосредственно перед элементом ввода. prefixIcon Элемент для вывода значка перед секцией префикса. внутренний Оболочка вокруг фактического элемента ввода. суффикс По умолчанию не имеет вывода, но разрешает содержимое непосредственно после элемента ввода. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт