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

10.01.2019

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

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

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

Маска для полей ввода телефонных номеров — своеобразный шаблон или набор правил, по которым пользователь обязан вводить информацию в поля форм. Их используют, если необходимо, чтобы все пользователи присылали свои номера телефонов в одном формате, например: +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. Не забывайте про мессенджеры
    Если среди клиентов много интернациональных, то хорошим тоном будет иметь возможность к номеру добавлять удобные варианты для связи (например, мессенджеры)

Читайте также