Подбор маски ввода по телефонному номеру
Введение
Обзор существующих решений
Предлагаемое решение
В результате было решено доработать привычную маску ввода так, чтобы она менялась в соответствии с текущим значением номера. Кроме того, по мере ввода номера предлагается отображать название определившейся страны. Данный подход, субъективно, должен решить все недостатки перечисленных выше решений.
С учётом того, что количество стран в мире относительно невелико, было принято решение составить список масок ввода для всех стран. В качестве источника использовались сведения, опубликованные на сайте международного союза электросвязи.
Сбор данной информации преподнёс немало сюрпризов. В процессе сбора сведений приходилось учитывать все возможные варианты телефонных номеров, в том числе внутри страны. Однако, ввиду большого количества обработанной вручную информации, возможно, в собранной базе остались неточности. С течением времени планируется вносить исправления в первоначальный набор.
Программная реализация
В качестве ядра маски ввода была использована реализация jquery.inputmask, о которой многократно упоминалось на Хабрахабр. Данный плагин сейчас активно развивается и, к тому же, спроектирован таким образом, что для него достаточно просто писать расширения. Однако в данной задаче написать такое расширение оказалось практически невозможно. Я не стал дорабатывать или переписывать исходный плагин под свои нужды, т.к. его автор продолжает активную работу над расширением функционала, в результате чего применение моих правок может оказаться проблематичным. Поэтому мне пришлось написать плагин-надстройку над основным ядром, который отслеживает (плюс перехватывает) внешние воздействия и производит модификацию данных. Для того, чтобы внедрить свои обработчики внешних воздействий до обработчиков основного плагина использовался плагина-библиотека jquery.bind-first.
Сортировка разрешённых масок ввода
Поиск подходящей маски ввода
При сравнении входного текста с очередной маской из отсортированного списка принимаются во внимание только значимые символы каждой маски. Если строка оказывается длиннее маски ввода, несмотря на то что все предшествующие символы прошли проверку, данная маска ввода считается неподходящей. В случае, если входному тексту удовлетворяет несколько масок ввода, то возвращается первая из них. Далее в найденной маске все значимые символы (в том числе нешаблонные) заменяются на шаблонный, который является комбинацией всех символов, разрешённых любым из шаблонных символов.
Обработка и перехват событий
Все события навешиваются в пространстве inputmask. Это позволяет избежать некорректного поведения при вызове inputmask после инициализации надстройки (т.к. ядро при инициализации снимает все ранее установленные обработчики в пространстве inputmask).
Пример использования
Формат списка масок
Список масок представляет собой JavaScript-массив объектов, предпочтительно с одинаковым набором свойств. Как минимум одно свойство, которое содержит маску ввода, должно присутствовать у всех объектов массива. Имя параметра, содержащего маску, может быть произвольным. Ниже представлен фрагмент такого массива:
Параметры подключения плагина
До подключения требуется загрузить и отсортировать список масок. Это делается выполнением следующей функции:
Для инициализации плагина нужно применить метод inputmasks к полю ввода:
Как сделать маску телефона в форме HTML и Contact Form 7
Сегодня я расскажу вам, как можно улучшить форму обратной связи с помощью маски ввода телефона. Рассмотрим, как это реализовать на различных проектах.
Первый вариант – мы подключим маску к контактной форме на чистом html.
Второй вариант – мы рассмотрим, как сделать маску телефона для Contact Form 7, и заодно, как правильно подключать скрипты в WordPress через файл functions.php.
Сперва посмотрим о чем идет речь:
В это поле можно вводить только цифры, и строго то количество которое задано у вас в маске.
Итак начнем! В обоих случаях нужно скачать файлы плагина jQuery Masked Input по этой ссылке с официального репозитория. Также даю ссылку на документации по плагину на GitHub.
Маска ввода телефона к форме на html + js
1. Создаем простую форму
3. Подключаем скрипты плагина
После того как мы убедились, что библиотека JQuery подключена, распаковываем скаченный архив с плагином “jQuery Masked Input”. Внутри архива находим папку “dist” и забираем оттуда минимизированный файл “jquery.maskedinput.min.js”. Я обычно кладу этот файл в корень сайта в папку со всеми скриптами “js”, и подключаю его между тегами :
Далее нам нужно сделать вызов кода маски и привязать его к уникальному идентификатору. Мы можем сделать это прописав уникальный class или id к полю input. В нашем случае мы пропишем id phon. Далее просто перед формой нужно вставить вот этот код:
Или, чтобы не вставлять каждый раз код скрипта перед каждой формой, создаём отдельный файл js, например maskphone.js, туда вставляем код ниже и сохраняем в папку “js” в корне сайта.
4. Определяем в какой форме и в каком поле будет работать плагин.
Всё, что нам нужно сделать, чтобы идентифицировать поле, это указать class или id в нужном поле input. Пример на картинке. На практике используйте что-то одно.
В примере, который я вам привёл, я использовал id – уникальное имя элемента. В таком случае, если у вас несколько одинаковых форм на одной странице маска телефона работать не будет. Так как id на странице может повторяться только 1 раз. Поэтому, если у вас на странице вызывается много раз одна и та же форма нужно прописать в поле input уникальный class.
А для активации скрипта в поле по class необходимо заменить код в maskphone.js на следующий:
С этим все, теперь рассмотрим как сделать тоже самое на одной из самых популярных CMS WordPress и дополнительного плагина к ней Contact Form 7.
Проектируем поле ввода «Номер телефона» для мобильных интерфейсов
Поле «Номер телефона» вместе с полем «Дата рождения» сложно сделать правильно. Есть много форматов телефонных номеров, которые пользователи могут выбирать, и они часто не уверены, какой из них корректный. Иногда пользователи даже не уверены, должны ли они указывать код страны.
Когда пользователи не уверены в правильности выбранного формата, они опасаются, что форма не примет введенные данные. Ошибка проверки из-за неверного формата номера телефона может заставить их отказаться от заполнения всей формы.
Ваши пользователи не должны задаваться вопросом, какой формат номера телефона правильный или получить ошибку проверки из-за неверного формата номера. Если это так, то поле «Номер телефона» вашей формы имеет плохой пользовательский опыт и нуждается в редизайне.
Избегайте плохих примеров и следуйте лучшим практикам, если хотите улучшить свои формы.
Сомнительный способ
Некоторые дизайнеры считают, что позволять вводить номер телефона в любом формате – решение проблемы. Это предотвратило бы ошибки проверки заполнения формы, но тогда пользователи не будут знать, какой формат они должны использовать.
Любая неопределенность для пользователя, может снизить коэффициент конверсии вашей формы. Пользователи должны быть уверены в формате номера телефона, иначе они будут беспокоиться о том, что вводимая ими информация не пройдет проверку.
Пользователям также не ясно, нужно ли указывать код страны перед номером телефона. Они могут ошибиться, введя код своей страны, когда это не требуется, что приведет к неправильному номеру телефона.
Неэффективный способ
Некоторые дизайнеры считают, что показ примера правильного формата в текстовом поле позволит решить неопределенность формата. Пользователь просто посмотрит на пример и наберет свой номер телефона в соответствующем формате.
Оказывается, пользователи замечают пример, но большинство из них не следует ему. Исследование показало, что «89% испытуемых набрали свой номер телефона в формате, отличном от приведенного примера».
Предоставление отформатированного примера не помогает, поскольку большинство пользователей игнорируют его. Это также приводит к ошибкам проверки, когда пользователь ввел номер в неправильном формате. Исследование показало, что ошибки проверки формата привели к отказу от заполнения формы.
Сложный способ
Некоторые дизайнеры говорят, что разделение строки номера телефона на отдельные текстовые поля решает проблемы с форматированием. Для американского номера у вас будет три текстовых поля. Эта практика делает форматирование правильным и последовательным, но только для американских пользователей.
Пользователи из других стран не смогут ввести данные, потому что их номера телефонов имеют другой формат и длину. Создание текстовых полей, локализованных под одну страну, не удобно для пользователей из других стран.
Отдельные текстовые поля также затрудняют ввод данных для мобильных пользователей. Тесты юзабилити показали, что многим пользователям было «трудно перемещаться между полями на мобильных устройствах». Это также затрудняет исправление введенных данных, если была допущена ошибка.
Легкий способ
Лучшая практика – это, когда пользователям даже не нужно думать о формате номера телефона или коде страны, потому что он автоматически исправляется на нужный.
Автоматическое форматирование ввода с геолокацией и маской ввода – это лучший способ представить поле «Номера телефона». Когда пользователи набирают свой номер телефона, надлежащий формат отображается без каких-либо усилий со стороны пользователя.
Пользователям не нужно вводить никаких скобок, тире, слэшей, точек или пробелов, только цифры. В поле есть одно ограничение – можно вводить только цифры, чтобы предотвратить ошибки проверки, если пользователи введут другие символы.
Геолокация страны пользователя позволяет автоматически форматировать номер телефона каждого пользователя независимо от того, откуда он. Вы также узнаете код страны пользователя, без необходимости его набора. Это означает, что для пользователя будет меньше работы, а для вас лучший коэффициент конверсии.
Код страны должен отображаться рядом с номером телефона, чтобы пользователи знали, что им не нужно вводить его. Самый интуитивный способ сделать это – отобразить значок флага страны пользователя внутри текстового поля рядом с введенными данными.
Можно разрешить пользователям изменять код страны, если они хотят ввести международный номер телефона. Нажав на значок флага, вы увидите раскрывающееся меню с кодами других стран.
Не заставляйте пользователя думать
Когда пользователи заполняют формы, они не хотят думать. Они хотят заполнить форму как можно быстрее. Разрешая пользователям вводить свой номер телефона в любом формате, вы заставляете их думать. Вместо этого, разгрузите пользователей, автоматически форматируя вводимые ими данные.
Внесение этого изменения в поле «Номер телефона» может предотвратить отказ от заполнения формы и увеличить коэффициент конверсии. Просто следуйте этим рекомендациям.
Маска ввода номера телефона
Для того, чтобы вы понимали о чем речь:
Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.
Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:
Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:
Кроме того, можно сделать запись с уже прописанным кодом страны, который будет выводится по умолчанию:
Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:
Всем, кто искал альтернативу или «баг» мешает нормальному приему заявок, рекомендую почитать эту статью.
51 комментарий
Статья реально полезная, внедрил, результатом доволен. Респект автору
Как раз работа с твоим сайтом и вдохновила на написание этой статьи))
JS Выдает ошибку «Uncaught TypeError: undefined is not a function»
А как добавить русские буквы?
Привет. Заменить на A-Яa-я, и все будет в порядке)) Спасибо, добавлю в статью, чтоб понятнее было)
Классная статья, пользуюсь случаем и хочу пропиарить свой первый проект, _https://vk.com/flokirovanie_na_zakaz_kharkov Буду рад посещению в группу
Маска работает, а как сделать так, чтобы на сервер отправлялись числа без маски?
то есть в поле вводится тел вида (987) 987-87-87, а на сервер отправляется 9879878787
удали все ненужные символы кроме чисел и все )
Хотя может есть способ проще это сделать. Это первое что в голову пришло.
Подскажите, как сделать, чтобы каретка при наборе номера всегда откатывалась влево, чтобы клиент не мог случайно начать писать свой номер с середины, теряя последние цифры номера? Просто были такие случаи)
Спасибо, Дима.
Реально полезная вещь.
У меня возникает такая ошибка в консоли
TypeError: jQuery(. ).mask is not a function
Библиотека jQery есть
скрипт maskedinput скачал и подключил
Это вставил в head
jQuery(document).ready(function() <
jQuery(«#Number»).mask(«(999) 999-9999»);
Не работает + таймер пропадает. В чем может быть проблема?
В конфликте скриптов
Для начала, нужно понять так ли это, пробовать отключать другие скрипты и проверять работает ли. Если заработает, то нужно попробовать обновить их до свежих версий, если не поможет, то пытаться понять в чем может быть причина, возможно придется искать аналогичные.
Попробуйте дать права файлу maskedinput
Дмитрий,вы не знаете, где можно альтернативу посмотреть?
альтернативу какому скрипту?
Дмитрий я тестировал, убрал все скрипты, вс еравно не пашет, я не понимаю,. Может быть я установил что-то не так.
required внутри поля так и матюкается, даже если поле заполнено. как исправить, не хочу использовать скрипты для проверки на заполненность. мне и css3 хватает
Как исправить? помогите!
Не должно оно ругаться, что-то не так делаете. Сейчас проверил, при попытке отправить, сразу открывается шаблон для ввода номера. После его заполнения, форма успешно отправляется.
Использовать разный айди, или пользуйся классами. 2 одинаковых айди (по спецификации), вообще не допустимы на странице.
Скажите, а как преобразовать пример если на странице несколько одинаковых форм? Как вместо id (#) использовать классы?
Вместо решетки использовать точку:
Чем короче длина значимых символов в маске ввода, тем маска ввода считается меньше и располагается выше.
Не могу скачать плагин maskedinput.js.
помогите.
Каким образом помочь?
и в чем проблема была? у меня тот же прикол.
ReferenceError: Can’t find variable: jQuery
(анонимная функция)maskedinput.js:7:144
(анонимная функция)maskedinput.js:8
Выше две ошибки, которые отдает консоль
А вот код моей страницы, не могу понять, что не так делаю((
подскажите пожалуйста
Не знаете ли Вы хорошей альтернативы этому плагину, без таких нюансов?
Все клёво работает, спасибо! Но есть одно «но». Скрипт конфликтует с плагином Crayon Syntax Highlighter (который, кстати, насколько я понимаю, используется и на данном сайте). Т.е. при активации плагина Crayon маска перестаёт работать. Может эту проблему можно как-то исправить, но у меня не получилось.
У тех у кого ошибка типа TypeError: jQuery(…).mask is not a function
есть решение, вместо доллара пишите jQuery
будет что то типа этого
jQuery(document).ready(function() <
jQuery(«input[type=tel]»).mask(«+7(999) 999-9999»);
>);
На мобилках плохо работает. При вводе номера цыфры перемешываються((.
Причем не на всех мобилах. У меня и у жены Андроиды. У меня браузер Хром, у нее штатный, который был в LG. У меня каретка при вводе телефонного номера (+7 ___ ___-__-__) ведет себя некорректно (для правильного ввода приходится в местах пробелов и дефисов нажимать кнопку «пробел» на клавиатуре), на телефоне жены — правильно работает (как и с компьютеров). В мобильном Хроме вместо:
И как починить, неясно 🙁
Версия Masked Input 1.4.1
Михаил, точно такая же проблема. Использовал при написании модуля формы обратной связи Ajax Webfactor Form для Joomla, и такой косяк вылез, пока что советую тем кто использует форму не ставить тип поля tel если есть мобильная версия сайта.
Кстати разработчик скрипта об этой проблеме знает, но пока телится что-то фиксить (
Добавь в маску +7, в чем проблема, не нужен +7, сделай маску такой, какая нужна, в чем проблема?
Класс, спасибо! Реально сработало
Как сделать, чтобы маска поддерживала два формата ввода?
Привязывайтесь к классу поля, и задавайте любую маску для его ввода.
Было бы хорошо, если бы работало на Маску \валидацию Emailа.
А как сделать так, чтобы при нажатии на маску курсор всегда перемещался в начало, а то проблема с этим. Хотелось бы, чтобы курсор сам всегда вставал в начало, куда бы я не нажал изначально
Роман, воспользуйтесь этой статьей: Маски ввода номера телефона
