Маска номера телефона что это
Маска номера телефона что это
ВВЕДЕНИЕ
Данная заметка предназначена для тех, кто ищет простой и нормальный скрипт для маски телефонного номера. Почему это важно? Потому что зачастую пользователь сайта не понимает как именно и в каком формате вводить свой номер телефона, на подсказку внутри поля как правило никто не обращает внимания. Поэтому надо сделать так, чтобы он тупо вбивал цифры, а формат номера оставался неизменным. Об этом и речь
Что вы узнаете:
Что такое «паттерн» и что такое «маска»
Код выглядит примерно так:
Пример использования маски ввода
Введите свой номер телефона
Готовый скрипт для ввода телефонного номера
HTML код поля выглядит примерно так:
JS код скрипта:
Как подключить данный скрипт к Joomla
Скрипт подключается очень легко. Просто добавьте его в папку JS вашего шаблона, а в index.php там где подключаете скрипты добавьте строчку:
Кстати, на этом сайте я сразу же заменил все паттерны для телефонных номеров, все работает отлично на последней версии joomla. Само собой, что скрипт можно использовать не только на joomla, а где угодно.
Напоминаю, что вопросы можно задать в группе https://t.me/newqosgroup
Подписывайтесь на канал в Телеграм
Политика сайта
Помните что все статьи и мнения основаны на личном опыте группы людей, их мнение может не совпадать с общепринятым, либо с еще каким-нибудь другим мнением
Сайт не собирает абсолютно никакой конфиденциальной информации ни под каким предлогом
Сайт не поддерживает никакие меньшинства: радужных дней, флагов и прочей ерунды не будет
Подбор маски ввода по телефонному номеру
Введение
Обзор существующих решений
Предлагаемое решение
В результате было решено доработать привычную маску ввода так, чтобы она менялась в соответствии с текущим значением номера. Кроме того, по мере ввода номера предлагается отображать название определившейся страны. Данный подход, субъективно, должен решить все недостатки перечисленных выше решений.
С учётом того, что количество стран в мире относительно невелико, было принято решение составить список масок ввода для всех стран. В качестве источника использовались сведения, опубликованные на сайте международного союза электросвязи.
Сбор данной информации преподнёс немало сюрпризов. В процессе сбора сведений приходилось учитывать все возможные варианты телефонных номеров, в том числе внутри страны. Однако, ввиду большого количества обработанной вручную информации, возможно, в собранной базе остались неточности. С течением времени планируется вносить исправления в первоначальный набор.
Программная реализация
В качестве ядра маски ввода была использована реализация jquery.inputmask, о которой многократно упоминалось на Хабрахабр. Данный плагин сейчас активно развивается и, к тому же, спроектирован таким образом, что для него достаточно просто писать расширения. Однако в данной задаче написать такое расширение оказалось практически невозможно. Я не стал дорабатывать или переписывать исходный плагин под свои нужды, т.к. его автор продолжает активную работу над расширением функционала, в результате чего применение моих правок может оказаться проблематичным. Поэтому мне пришлось написать плагин-надстройку над основным ядром, который отслеживает (плюс перехватывает) внешние воздействия и производит модификацию данных. Для того, чтобы внедрить свои обработчики внешних воздействий до обработчиков основного плагина использовался плагина-библиотека jquery.bind-first.
Сортировка разрешённых масок ввода
Поиск подходящей маски ввода
При сравнении входного текста с очередной маской из отсортированного списка принимаются во внимание только значимые символы каждой маски. Если строка оказывается длиннее маски ввода, несмотря на то что все предшествующие символы прошли проверку, данная маска ввода считается неподходящей. В случае, если входному тексту удовлетворяет несколько масок ввода, то возвращается первая из них. Далее в найденной маске все значимые символы (в том числе нешаблонные) заменяются на шаблонный, который является комбинацией всех символов, разрешённых любым из шаблонных символов.
Обработка и перехват событий
Все события навешиваются в пространстве inputmask. Это позволяет избежать некорректного поведения при вызове inputmask после инициализации надстройки (т.к. ядро при инициализации снимает все ранее установленные обработчики в пространстве inputmask).
Пример использования
Формат списка масок
Список масок представляет собой JavaScript-массив объектов, предпочтительно с одинаковым набором свойств. Как минимум одно свойство, которое содержит маску ввода, должно присутствовать у всех объектов массива. Имя параметра, содержащего маску, может быть произвольным. Ниже представлен фрагмент такого массива:
Параметры подключения плагина
До подключения требуется загрузить и отсортировать список масок. Это делается выполнением следующей функции:
Для инициализации плагина нужно применить метод inputmasks к полю ввода:
Маска ввода номера телефона
Для того, чтобы вы понимали о чем речь:
Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.
Теперь необходимо скачать и подключить плагин 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а.
А как сделать так, чтобы при нажатии на маску курсор всегда перемещался в начало, а то проблема с этим. Хотелось бы, чтобы курсор сам всегда вставал в начало, куда бы я не нажал изначально
Роман, воспользуйтесь этой статьей: Маски ввода номера телефона
Как реализовать маску ввода телефонного номера?
Upd: Поправил ссылку, спасибо Александр Янк
Алексей у меня такая же беда, как и у автора вопроса. только добавив такой класс в обеих формах маска перестала появляться.
вот код первой формы:
Подключаете и используете один из методов:
$(document).ready(function() <
$(selector).inputmask(«99-9999999»); //static mask
$(selector).inputmask(<"mask": "(999) 999-9999">); //specifying options
$(selector).inputmask(«9-a<1,3>9<1,3>«); //mask with dynamic syntax
>);
Ни чего у меня не получилось. 🙁
Я уже пробовал описание как в этом уроке: https://www.youtube.com/watch?v=Ds8CX0yKbYs (вроде бы всё понятно, но не работает должным образом. Точнее вообще не работает 🙁 Попытался разобраться с плагином: https://github.com/andr-04/inputmask-multi такая же петрушка. Видимо делаю что то не так, а что понятия не имею. По видеоуроку, я писал скрипт прям в index.html быть может вовсе не там писать надо? Или быть может в jsфайле надо что то менять.. код обработчика как то дорабатывать надо? Вот кстати и обработчик:
Вот так у меня реализованы инпуты:
Задавал им ID но зезультата увы не достиг 🙁
По видео уроку, такой код получился:
Пожалуйста скажите, что сделать, что б всё заработало согласно моим хотелкам?
Как сделать маску телефона в форме 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.