logo

Управление форматами данных пользователей на сайте. Добавление маски для ввода номера телефона

Управление форматами данных пользователей на сайте. Добавление маски для ввода номера телефона
г. Минск, ул. Л. Карастояновой 32 (БЦ «Сакрамент»), 4 этаж

Содержание статьи:

Что это такое?

Маска для полей ввода телефонных номеров — своеобразный шаблон или набор правил, по которым пользователь обязан вводить информацию в поля форм. Их используют, если необходимо, чтобы все пользователи присылали свои номера телефонов в одном формате, например: +375 (хх) ххх-хх-хх

Пример использования маски

Такие маски используются, как правило, в полях для ввода телефонных номеров:

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

Примеры использования

Для более чёткого восприятия данные вводятся постепенным нажиманием цифр 1−2-3−4-5-…

Пример 1.

Маска с предварительной подсказкой (плейсхолдером)

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

Пример 2.

Маска с заранее вставленным кодом страны

Такой вариант более понятен пользователю.

Пример 3.

Маска с выбором страны

Такая маска имеет смысл только для международных компаний.

На первый взгляд использование масок для ввода номеров телефонов может показаться очень хорошим вариантом. Но не спешите с выводами.

Преимущества масок

  1. Номера телефонов приходят менеджерам в едином формате.
  2. Наглядное отображение правил ввода.
  3. Пользователю не нужно вводить код страны.

Недостатки масок

  1. Иногда логика ввода данных может ввести пользователя в ступор (cм. Пример 1).
  2. Количество символов в маске всегда предопределено заранее. Это создаёт проблемы, ведь зачастую количество цифр в мобильных и стационарных номерах различны.
    Например:
    • +375 (29) 123-45-67 — мобильный
    • +375 (162) 12-34-56 — стационарный телефон (Брест)
  3. При опечатке или ошибке в номере, пользователю не удобно вносить изменения в уже написанный номер.
  4. Даже самая жёстко заданная маска телефона не спасёт от ошибок при вводе в форму номера пользователем. При использовании масок периодически информация менеджеру приходит с пропущенными символами.
    Например: +375 (29) 123-_5−67
  5. Т.к. все эти решения реализуются с помощью языка JavaScript, то иногда возможны сбои, т.к. в браузерах некоторых пользователей JavaScript может быть отключён.

Советы по применению

Если вы решили использовать маски для ввода номеров телефона, стоит подумать о целесообразности данного решения в вашем проекте, тщательно взвесить все «за» и «против».

При обдумывании этого вопроса можете руководствоваться следующими советами:

  1. Не загоняйте пользователя в рамки
    Хорошо, если пользователь имеет возможность вписать номер любой страны.

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

  3. Ввод номера должен быть простым
    Не стоит делать громоздкий выбор страны оператора, если компания работает в основном в пределах Республики Беларусь.

  4. Телефон — не обязательно только цифры
    Иногда пользователю удобнее написать номер в произвольной форме. Например: 354−56−14 велком. И менеджеру такая запись будет вполне понятна.

  5. Маска — не панацея
    Даже самая жёстко заданная маска телефона не спасёт от ошибок при вводе в форму номера пользователем.

  6. Иногда подсказок достаточно
    Вместо маски можно использовать дополнительные подсказки (плейсхолдер и пример номера рядом с полем)

  7. Не забывайте про мессенджеры
    Если среди клиентов много интернациональных, то хорошим тоном будет иметь возможность к номеру добавлять удобные варианты для связи (например, мессенджеры)

Узнать стоимость и условия

* — поля, обязательные для заполнения
г. Минск, ул. Л. Карастояновой 32 (БЦ «Сакрамент»), 4 этаж