Маски для телефонных номеров

Телефонные номера — один из самых распространённых типов данных в веб-формах. Пользователь может вводить номер в произвольном формате: со скобками, пробелами, дефисами, кодом страны или без него. Без маски поле быстро превращается в источник ошибок и несогласованных данных.

Библиотека Inputmask позволяет жёстко контролировать формат ввода телефонных номеров, автоматически подставлять разделители, ограничивать набор допустимых символов и поддерживать динамическое изменение шаблонов.

Телефонные маски особенно важны для:

  • регистрационных форм;
  • CRM-систем;
  • интернет-магазинов;
  • сервисов доставки;
  • банковских приложений;
  • административных панелей;
  • систем авторизации по SMS.

Простая телефонная маска

Наиболее базовый вариант — фиксированный шаблон номера.

<input id="phone">
Inputmask("+7 (999) 999-99-99").mask("#phone");

Результат ввода:

+7 (___) ___-__-__

Каждая цифра вводится строго в заданную позицию.

Что означает шаблон

+7 (999) 999-99-99
  • +7 — статическая часть;
  • 9 — обязательная цифра;
  • скобки и дефисы — автоматически подставляемые символы.

Пользователь не вводит разделители вручную — библиотека делает это автоматически.

Использование объекта конфигурации

Телефонные маски почти всегда настраиваются через объект параметров.

Inputmask({
    mask: "+7 (999) 999-99-99"
}).mask("#phone");

Такой подход удобнее при большом количестве настроек.

Маска международного номера

Для международных номеров длина кода страны может отличаться.

Inputmask({
    mask: "+9{1,3} (999) 999-9999"
}).mask("#phone");

Разбор шаблона

+9{1,3}

означает:

  • минимум 1 цифра;
  • максимум 3 цифры.

Допустимые варианты:

+1
+44
+380

Телефонная маска с необязательной частью

Некоторые номера содержат добавочный код.

Inputmask({
    mask: "+7 (999) 999-99-99[ доб. 9999]"
}).mask("#phone");

Квадратные скобки обозначают необязательный блок.

Возможные варианты:

+7 (999) 123-45-67
+7 (999) 123-45-67 доб. 1234

Автоматическое отображение маски

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

Inputmask({
    mask: "+7 (999) 999-99-99",
    showMaskOnFocus: true
}).mask("#phone");

Если необходимо скрыть шаблон до начала ввода:

Inputmask({
    mask: "+7 (999) 999-99-99",
    showMaskOnFocus: false
}).mask("#phone");

Отображение маски при наведении

Параметр:

showMaskOnHover

управляет поведением маски при наведении курсора.

Inputmask({
    mask: "+7 (999) 999-99-99",
    showMaskOnHover: false
}).mask("#phone");

Placeholder в телефонных масках

Символ заполнителя задаётся через placeholder.

Inputmask({
    mask: "+7 (999) 999-99-99",
    placeholder: "_"
}).mask("#phone");

Результат:

+7 (___) ___-__-__

Можно использовать любой символ.

Inputmask({
    mask: "+7 (999) 999-99-99",
    placeholder: "*"
}).mask("#phone");

Результат:

+7 (***) ***-**-**

Очистка незавершённой маски

Если пользователь ввёл номер не полностью, поле может автоматически очищаться.

Inputmask({
    mask: "+7 (999) 999-99-99",
    clearIncomplete: true
}).mask("#phone");

Пример:

+7 (999) 12

После потери фокуса поле станет пустым.

Удаление маски при отправке формы

Иногда серверу нужен только набор цифр.

Inputmask({
    mask: "+7 (999) 999-99-99",
    removeMaskOnSubmit: true
}).mask("#phone");

Тогда вместо:

+7 (999) 123-45-67

будет отправлено:

79991234567

Получение значения без маски

Метод unmaskedvalue() возвращает только введённые символы.

const input = document.getElementById("phone");

console.log(input.inputmask.unmaskedvalue());

Результат:

79991234567

Проверка завершённости номера

Метод isComplete() определяет, полностью ли введён номер.

const isComplete = input.inputmask.isComplete();

console.log(isComplete);

Результат:

true
false

Маска с несколькими форматами

В разных странах используются разные форматы телефонов.

Inputmask({
    mask: [
        "+7 (999) 999-99-99",
        "+1 (999) 999-9999"
    ]
}).mask("#phone");

Библиотека автоматически подбирает подходящий шаблон.

Динамические телефонные маски

Inputmask поддерживает изменение шаблона во время ввода.

Inputmask({
    mask: [
        "+7 (999) 999-99-99",
        "+375 (99) 999-99-99"
    ],
    keepStatic: false
}).mask("#phone");

Параметр keepStatic

Если:

keepStatic: true

библиотека старается удерживать текущую маску.

Если:

keepStatic: false

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

Маска для мобильных и городских номеров

Можно разделять форматы по длине номера.

Inputmask({
    mask: [
        "(999) 999-99-99",
        "(9999) 99-99-99"
    ]
}).mask("#phone");

Использование регулярных выражений

Для нестандартных номеров можно использовать regex-маску.

Inputmask({
    regex: "\\+\\d{1,3}\\s\\d{10}"
}).mask("#phone");

Подход полезен при сложной международной логике.

Маска с автоподстановкой кода страны

Часто код страны должен присутствовать всегда.

Inputmask({
    mask: "+7 (999) 999-99-99",
    insertMode: false
}).mask("#phone");

Пользователь вводит только оставшиеся цифры.

Использование greedy

Параметр управляет поведением повторяющихся блоков.

Inputmask({
    mask: "+9{1,3} (999) 999-99-99",
    greedy: false
}).mask("#phone");

Разница режимов

greedy: true

Маска сразу резервирует максимум символов.

greedy: false

Маска расширяется постепенно по мере ввода.

Обработка вставки номера

Пользователь может вставить номер из буфера обмена.

Например:

89991234567

Inputmask автоматически преобразует ввод:

+7 (999) 123-45-67

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

Событие завершения ввода

Параметр oncomplete вызывается после полного заполнения номера.

Inputmask({
    mask: "+7 (999) 999-99-99",
    oncomplete: function () {
        console.log("Номер заполнен");
    }
}).mask("#phone");

Событие незавершённого ввода

Inputmask({
    mask: "+7 (999) 999-99-99",
    onincomplete: function () {
        console.log("Номер введён не полностью");
    }
}).mask("#phone");

Событие очистки поля

Inputmask({
    mask: "+7 (999) 999-99-99",
    oncleared: function () {
        console.log("Поле очищено");
    }
}).mask("#phone");

Использование alias для телефона

В библиотеке существуют готовые псевдонимы.

Inputmask({
    alias: "phone"
}).mask("#phone");

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

Маскирование нескольких полей

<input class="phone">
<input class="phone">
<input class="phone">
Inputmask("+7 (999) 999-99-99")
    .mask(".phone");

Маска применится ко всем элементам.

Маска для динамически созданных элементов

Если поле добавляется после загрузки страницы:

const input = document.createElement("input");

document.body.appendChild(input);

Inputmask("+7 (999) 999-99-99")
    .mask(input);

Использование с querySelectorAll

const phones = document.querySelectorAll(".phone");

Inputmask("+7 (999) 999-99-99")
    .mask(phones);

Работа с jQuery

Inputmask долгое время активно использовался вместе с jQuery.

$("#phone").inputmask("+7 (999) 999-99-99");

Удаление телефонной маски

const input = document.getElementById("phone");

input.inputmask.remove();

После этого поле становится обычным текстовым input.

Повторное применение маски

input.inputmask.remove();

Inputmask("+1 (999) 999-9999")
    .mask(input);

Подход используется при переключении страны.

Переключение маски по выбору страны

<select id="country">
    <option value="ru">Россия</option>
    <option value="us">USA</option>
</select>

<input id="phone">
const phone = document.getElementById("phone");
const country = document.getElementById("country");

country.addEventListener("change", () => {

    phone.inputmask?.remove();

    if (country.value === "ru") {

        Inputmask("+7 (999) 999-99-99")
            .mask(phone);

    } else {

        Inputmask("+1 (999) 999-9999")
            .mask(phone);

    }
});

Использование inputmode

Для мобильных устройств рекомендуется:

<input id="phone" inputmode="tel">

Это помогает открыть цифровую клавиатуру.

Валидация телефона

Маска не заменяет полноценную проверку номера.

Например:

+7 (111) 111-11-11

формально соответствует шаблону, но может быть несуществующим номером.

Поэтому обычно используются:

  • Inputmask для формата;
  • серверная валидация для проверки номера;
  • SMS-подтверждение для проверки существования телефона.

Типичные ошибки

Использование type="number"

Неправильно:

<input type="number">

Телефон — не число, а строка.

Правильно:

<input type="tel">

Потеря ведущего плюса

Некоторые разработчики удаляют символ +.

В международных форматах это приводит к неоднозначности.

Чрезмерно жёсткая маска

Плохой пример:

"+7 (999) 999-99-99"

если проект работает с несколькими странами.

В международных сервисах лучше использовать динамические шаблоны.

Отсутствие очистки значения

Если сервер ожидает:

79991234567

а получает:

+7 (999) 123-45-67

могут возникать ошибки обработки.

Практический пример формы

<form id="form">

    <input id="phone" type="tel">

    <button>Отправить</button>

</form>
Inputmask({
    mask: "+7 (999) 999-99-99",
    clearIncomplete: true,
    removeMaskOnSubmit: true
}).mask("#phone");

Поведение:

  • пользователь видит удобный формат;
  • автоматически появляются разделители;
  • нельзя ввести лишние символы;
  • незавершённый номер очищается;
  • сервер получает только цифры.

Телефонные маски и UX

Правильно настроенная маска:

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

Неправильно настроенная маска:

  • мешает вставке номера;
  • блокирует международные форматы;
  • усложняет редактирование;
  • раздражает пользователей на мобильных устройствах.

Поэтому телефонные маски требуют аккуратной настройки под конкретную задачу и аудиторию проекта.

Оглавление