Перейти к содержимому
Логотип AlpineJS Логотип AlpineJS Alpine.js по-русски  

Mask

Плагин Mask позволяет автоматически форматировать поле ввода текста по мере его набора пользователем.

Это удобно для различных типов входов: номера телефонов, кредитных карт, суммы в долларах, номера счетов, даты и т. д.

Установка

Вы можете использовать этот плагин, включив его из тега <script> или установив с помощью менеджера пакетов.

Через CDN

Вы можете подключить CDN-сборку этого плагина с помощью тега <script>, только подключать нужно ДО основного JS-файла Alpine.

<!-- Mask Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/mask@3/dist/cdn.min.js"></script>


<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

Через менеджер пакетов

Вы можете установить Mask для использования внутри вашей сборки следующим образом:

Окно терминала
npm i @alpinejs/mask

Затем инициализируйте его в своей сборке:

import Alpine from 'alpinejs';
import mask from '@alpinejs/mask';


Alpine.plugin(mask);
Alpine.start();

x-mask

Основным API для использования этого плагина является директива x-mask.

Для начала рассмотрим следующий простой пример поля даты:

<input x-data x-mask="99/99/9999" placeholder="MM/DD/YYYY" />

Обратите внимание, что текст, вводимый в поле ввода, должен соответствовать формату, задаваемому x-mask. Помимо принудительного ввода числовых символов, автоматически добавляются прямые косые черты /, если пользователь не ввел их первым.

В масках поддерживаются следующие символы подстановки:

Знак подстановкиОписание
*Любой символ
aТолько буквенные символы (a-z, A-Z)
9Только цифровые символы (0-9)

Динамические маски

Иногда простых литералов масок (т. е. (999) 999-9999) недостаточно. В этих случаях x-mask:dynamic позволяет динамически генерировать маски «на лету» на основе пользовательского ввода.

Вот пример ввода данных о кредитной карте, который должен менять маску в зависимости от того, начинается ли номер с цифры «34» или «37» (что означает, что это карта Amex и, следовательно, имеет другой формат).

<input
  x-data
  x-mask:dynamic="
    $input.startsWith('34') || $input.startsWith('37')
        ? '9999 999999 99999' : '9999 9999 9999 9999'
"
/>

Как видно из приведённого примера, каждый раз, когда пользователь вводит значение input, это значение передается в выражение как $input. В зависимости от $input в поле используется та или иная маска.

Попробуйте сами, набрав число, начинающееся с «34» и число, которое не начинается.

x-mask:dynamic также принимает функцию в качестве результата выражения и автоматически передает ей $input в качестве первого параметра. Например:

<input x-mask:dynamic="creditCardMask" />


<script>
  function creditCardMask(input) {
    return input.startsWith('34') || input.startsWith('37')
      ? '9999 999999 99999'
      : '9999 9999 9999 9999';
  }
</script>

Ввод денежных сумм

Поскольку написание собственного динамического выражения маски для ввода денежных сумм достаточно сложно, Alpine предлагает готовый вариант и предоставляет его в виде $money().

Здесь представлена полностью функционирующая маска ввода денежных сумм:

<input x-data x-mask:dynamic="$money($input)" placeholder="0.00" />

Если необходимо поменять точки на запятые и наоборот (как это требуется в некоторых валютах), то это можно сделать с помощью второго необязательного параметра:

<input x-data x-mask:dynamic="$money($input, ',')" placeholder="0,00" />

Вы также можете переопределить разделитель тысяч, указав третий необязательный аргумент:

<input x-data x-mask:dynamic="$money($input, '.', ' ')" placeholder="3 000.00" />

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

<input x-data x-mask:dynamic="$money($input, '.', ',', 4)" placeholder="0.0001" />

Проверка знаний

  1. С помощью какого модификатора задаётся динамическая маска?

  2. Как указать сумму с запятой вместо точки?