Маска ввода для телефона на Vue.js

Начну сходу, предположим, что вам необходимо создать простую и удобную маску ввода телефона для своего Vue.js проекта. Вы знаете, что на jQuery есть огромная куча всяких готовых библиотек с нужным функционалом, но что же есть у Vue.js?

А у Vue.js есть Vue.js. Это настолько крутой фреймворк, что с его помощью можно самостоятельно хоть сто масок написать на все случаи жизни, и это довольно просто. Короче, много лишних слов, давайте просто с помощью Vue.js директив напишем свою маску ввода для телефона. Код займет примерно 20 строк!

Значит так, сейчас мы будем работать с двумя технологиями: Vue.js и его директивы, и регулярные выражения. Искренне надеюсь, что вы знакомы с регулярными выражениями, иначе будет немного сложно (для понимания, код то я все равно готовый дам).

Код маски ввода для телефона

Да, это скриншот кода. Если хотите скачать, просто перейдите по ссылке на GitHub и скачайте.

Как активировать

Существует несколько способов: можно добавить директиву в конкретный компонент, а можно зарегистрировать глобально. Я покажу, как зарегистрировать директиву глобально для Nuxt.js и чистого Vue.js.

Активируем маску в чистом Vue.js проекте

Все просто, идем в main.js, там, где у нас создается основной Vue экземпляр и импортирована Vue библиотека. Ниже объявления нового Vue экземпляра регистрируем директиву. Пример:

Естественно, import копировать не надо, он уже должен быть в main.js.

Далее в любом input вызываем нашу директиву с помощью команды v-phone. Прямо как v-model, только v-phone. Для красоты можете взять такой же placeholder, как у меня. Возможны проблемы с компонентами-импутами, но если вы используете стандартный HTML тег <input> можете не беспокоится.

Активируем маску в Nuxt.js

Для тех, кто в танке, Nuxt.js - это тот же Vue.js, только с SSR.

Тут все немного муторно, просто смотрите внимательно. По желанию создайте внутри Nuxt проекта папку plugins, после создайте файл mask.js (если создали папку plugins, то файл mask.js внутри этой папки). После берите код с GitHub и сохраняйте в mask.js. Пример:

После нам нужно, чтоб Nuxt.js начал “видеть” наш код. Для этого идем в nuxt.config.js в раздел plugins и регистрируем наш файл, как это сделал я:

Важно заметить, что ssr false нужен для того, чтоб Nuxt.js не пытался это отрисовать на сервере. Ну просто зачем?

Ну и для тех, кто хочет немного доработать маску или просто ему интересно узнать, как это фигня работает - милости прошу читайте дальше.

Как “оно” работает

Возвращаюсь к коду с GitHub, буду объяснять по строчкам.

На 1 строке с помощью import Vue form “Vue” мы получаем доступ к Vue.js библиотеке и можем создавать новые экземпляры класса, регистрировать глобально компоненты и директивы.

На 3 строке во Vue.directive мы регистрируем глобально директиву phone, которую можем вызывать в любом месте нашей программы с помощью команды v-phone. Если директиву назвать bruh, то вызов будет v-bruh.

На 4 строке в метод bind мы передаем аргумент el. Аргумент el - это сам элемент, к которому привязана директива. Метод bind - это особый функционал директив во Vue.js. Bind вызывается однократно, при первичном связывании директивы с элементом.

На 5 строке мы “навешиваем” событие oninput на элемент (el). При каждом срабатывании события (набор текста) срабатывает указанная нами функция. Функция в аргументе принимает событие (event).

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

На 10 строке идет сложное регулярное выражение. Сначала мы в replace заменяем все, кроме чисел, на пустоту (в value у input), потом среди чисел в методе match формируем группы. Каждая группа (группа это круглые скобки) будет доступна в виде элемента массива с помощью вызова по индексу, например, x[2] вызовет группу, собранную по паттерну (d{0,3}). В x[0] всегда будет лежать полное значение (value) input.

C 12 строчки начинается логическая конструкция. Сначала я проверяю первую группу на пустоту. Т.е пока 2 группа не сформирована, но 1 уже есть. Здесь подставляется цифра 8 к каждому номеру. Если первый символ 8 - ставим 8. Если 9, то прибавляем к 8. Получится 89.

Во второй части идет сложный тернарный оператор. Если 3 группы нет, я формирую строку из 1 и 2 группы. Если 3 группа есть, я формирую строку из всех 4 групп (тут же добавляю скобки и тире).

На что следует обратить внимание

Если происходит событие onpaste (Ctrl+C) и первая цифра строки 7 (или комбинация +7), то 8 не появляется. Поэтому, я немного расширил директиву и оставил комментарий в Gist на Github. Просто посмотрите как я решил эту "проблему".  Данный пример показывает что с помощью директив можно не только oninput обрабатывать.

Спасибо за внимание. Мысленно пожелайте мне спасибо, если статья была полезна. Этого будет достаточно.