Как сделать в поле ввода маску на ввод номера телефона
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Данная статья — перевод документации по Maskedinput на GitHub с расширеными примерами использования.
Маска определяется форматом, состоящим из литералов маски и определений маски. Любой символ, отсутствующий в списке определений ниже, считается литералом маски. Литералы маски будут автоматически вводиться для пользователя по мере их ввода и не могут быть удалены пользователем. Предопределены следующие стандартные обозначения :
- 9 - любая цифра 7
- a - любой символ латинского алфавита [A-Za-z]
- * - цифра или символ латинского алфавита [A-Za-z0-9]
- Дополнительно можно определить свои
Подключение файлов
Файлы, необходимые для работы плагина (Версия jQuery 1.8.3+):
Примеры использования jQuery.Maskedinput
Обратите внимание, что во всех примерах на этом сайте подключен мини-плагин для решения проблемы с кликом по центру (см. последний раздел статьи)
Базовые примеры
Вызовите функцию mask для тех элементов, к которым вы хотите применить маску. Никаких дополнительных вызовов функции прописывать не нужно.
Продвинутое использование плагина
Маска для ввода номера телефона
Разберем разные варианты кастомизации
Переопределение стандартных обозначений для указания номера с фиксированной девяткой, например код оператора
Отключение автозаполнения
Чтобы гарантированно отключить автозаполнение применяйте технику, описанную в моей заметке.
Дополнительная кастомизация
По-умолчанию, если поле ввода теряет фокус до того как будет заполненно пользостью, данные стираются. Это поведение можно отключить:
Вы можете иметь часть вашей маски не обязательной. Перечислено после '?' внутри маски считается необязательным. Типичным примером этого является номер телефона и дополнительный добавочный номер.
Решение проблемы с кликом по центру
Один из минусов плагина в том, что если кликнуть по центру маски, то курсор может там и остаться. Это неприятная проблема, но решается с помощью миниатюрного плагина.
jQuery-плагин для установки курсора в определенной позиции pos :
Добавляем обработчик на поле ввода и затем ставим маску. Цифра при вызове .setCursorPosition(3) указывает на позицию, в которой должен быть поставлен курсор:
Данную статью решил написать, потому как часто пользуюсь данной вещь, а на сайте о ней почему-то раньше не рассказал. Как Вы успели догадаться, речь пойдет о маске ввода телефонного номера. Если вы заметили, а может еще и нет, я сделал плагин обратного звонка для WordPress и других систем или страниц, посмотреть его можно здесь - Плагин заказа обратного звонка.
По умолчанию, на этом плагине маски нет, потому как его покупают из разных стран, также некоторым он нужен для ввода городских номеров и тд. По желанию заказчиков я часто устанавливаю маску ввода номера, если они хотят упорядочить ввод номера и задать определенный стандарт.
Выглядит это примерно так:
Чтобы установить маску ввода номера, нужно подключить несколько скриптов. Начнем пожалуй из подключения библиотеки jQuery. В шапку сайта перед закрывающимся head или в подвал перед закрывающимсяbody добавьте вот такую строку кода:
Если Вы уже подключали или это сделано до вас и в Вашем коде есть схожая строка, возможно с другой версией, то делать это повторно не следует.
Далее Вам надо скачать файл maskinput.js, внутри которого плагин для обработки маски. Потом залить себе на сайт например в папку js и подключаем после библиотеки jquery. Получится это примерно так:
Далее, мы добавляем последний из скриптов, который и создаст вид нашей маски, то есть то что будет видно внутри формы ввода. После библиотеки и плагина добавляем вот такой код:
Как видите мы задали маску и теперь человек в поле ввода увидит вот такой вид - +380(___) ___-____. Плагин маски устроен так, что все девятки - 9 меняет на нижний прочерк - _.
Есть момент. Если вам в коде нужно задать девятку, чтобы ее было видно, у Вас проблема 🙂 ее заменит прочерком то есть получится, если вам надо так 95(__)____ у вас выйдет так _5(__)____
Как решить этот вопрос я пока не нашел.
Поле ввода будет обычным, главное правильно указать айди.
Благодаря placeholder сначала в поле будет текст, а при нажатии по нему появится маска. можете маску ввести сразу, тогда она будет и там и там.
Вот собственно и вся маска. Также хочу добавить, что можно указывать разные маски одновременно для разных полей ввода, например так:
Здесь мы задали маски для трех полей с разными масками. Первое у нас телефон, второе дата, а третье, например карточка скидок.Соответственно в полях для ввода, при вводе будет показано следующее:
Данные примеры все касались цифровых вводов, но есть еще и другие.
- 9 — Как Вы поняли, если вбить ее, то все девятки можно заменить только на цифровые значения (0-9)
- a — Если в маске указать данный символ, ну например - .mask("aaaаааа"). То можно будет ввести буквы на латинице, то есть значения (A-Z,a-z).
- * — Укажите данный символ и в поле ввода можно вводить все что угодно(A-Z,a-z,0-9)
Конечно по желанию Вы сможете комбинировать параметры, например - .mask("aaaа-999999"). Такая маска, конечно же с другим количеством символом подойдет для ввода номера паспорта и серии или кошелька webmoney и тд.
Что я думаю по поводу маски? Определенно не скажу. Вещь удобная и направляет пользователя на правильность ввода. Смотрится красиво, НО! Как обычно у меня - Но. если бы маска была просто маленьким кусочком скрипта, я не против, но для ее работы подключается целый плагин, то есть это дополнительная нагрузка.
Конечно, если у Вас ничего нет и Вы используете маску на лендинге, то тут ничего страшного, как говорится. Если у вас полноценный сайт, на котором без того много скриптов и плагинов. Конечно же, если у Вас сайт отлично оптимизирован и имеет отличный хостинг с быстрым откликом и без жалоб на нагрузку, то думаю, ставьте смело 🙂
Очень надеюсь, что данная статья поможет Вам! Можете поделится в комментариях, где Вы используете маску.
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
На самом деле я очень долго думал, как же назвать эту запись, чтобы ее было легче найти. Ведь по сути мы всего лишь создадим маску для поля ввода input, чтобы посетителям сайта было проще вводить номер телефона. Давайте сделаем это.
Чтобы создать маску для ввода телефонного номера, нам понадобится небольшой jquery скрипт - jquery.maskedinput, вес которого составляет чуть больше 4 кб. Уверен, это приемлемо для любого проекта:) Скачиваем скрипт, подключаем его, предварительно не забываем подключить свежую библиотеку jQuery. Кстати, с помощью этого небольшого скрипта можно создать маску для ввода не только телефона.
Теперь создадим простое поле ввода:
На этом наша разметка закончена. Пришло время написать скрипт, который и будет выполнять всю работу:
Помимо этого доступны следующие варианты ввода:
- a — Все алфавитные значения (A-Z,a-z)
- 9 — Все цифровые значения (0-9)
- * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)
Полный код страницы:
Если между вводимыми значениями нужно заменить стандартный символ пробела - _, то нужно использовать следующий код:
В этом коде между кавычек placeholder:" " можно написать любой символ, который будет использоваться в качестве разделителя.
Также есть возможность выполнить какое-нибудь действие по успешному завершению ввода. Тогда код будет такой:
Довольно удобная штука при правильном применении. Вот и все. Правильных и удобных полей ввода вам!
Я как всегда с сюрпризом) В этой статье я покажу Вам, как можно сделать поле для ввода телефона, но не простое а золотое, с маскировкой и проверкой.
Что такое маскировка поля? Наверняка Вы уже сталкивались с такой штукой, что у поля телефона есть такая вот подсказка +38 (___) ___ __ __ — именно она и называется маскировкой. Преимущество маскировки над обычным тегом placeholder заключается в том, что она не исчезает после клика по заполняемому полю. Для реализации такой штуки новый велосипед мы изобретать не будем а используем готовое решение в виде jQuery плагина Masked Input — этот плагин реально крутой и получил очень широкое распространение во всем мире.
Разметка формы
Не буду ходить вокруг да около, а покажу как мы применим этот замечательный плагин. Для начала создадим простую форму, содержащую поле для телефона ну и кнопку сабмита формы:
Стилизация формы
Как Вы видите я оформил так же тег placeholder , вобще он нужен потому, что обычное поведение плагина это появление маскировки при клике по полю, когда поле теряет фокус то и маскировка тоже исчезает, чтобы такого не происходило я добавил тег placeholder . Здесь ничего сверхъестественного я не написал, поэтому идем дальше и напишем простой jQuery скрипт.
jQuery скрипт
Перед закрывающим тегом body подключим библиотеку jQuery, плагин Masked Input, ну и наш скрипт:
Как Вы смогли заметить, у скрипта добавился такой вот блок:
Мобильная проверка поля телефона
Казалось все реально круто и красиво. Но как говорится мечтать не вредно, на сцену выходя мобильные браузеры и кто еще не сталкивался, тот столкнется с той проблемой, что javascript в них работает не ахти, тоесть нифига нормально не работает и это печально, однако не все потеряно. Благодаря HTML5 в арсенале верстальщика есть браузерные средства проверки полей формы и радует то, что мобильные браузеры их поддерживают!
Браузерная проверка очень простая, не нужно писать никаких скриптов, достаточно в разметке формы указать аттрибут required полю, которое обязательно для заполнения, стандартно это выглядит так:
Тоесть дело остается за малым, нужно организовать проверку откуда пользователь просматривает Ваш проект/сайт, это можно осуществить еще одним очень маленьким jQuery плагином, который называется is.mobile.js (он есть в папке с архивом урока), подключим его там же где и остальные скрипты:
Финальный этап
Чтобы не было никаких конфликтов, разметку формы мы сразу пишем для мобильных браузеров:
В форме все достаточно просто:
- type="tel" — указываем что это поле для ввода телефона
- required — обязательное поле
- pattern="[0-9_-]" — паттерн поля, цифры 0-9 указывают на то что вводимые символы должны быть цифрами, а — на то что этих цифр должно быть 10
- title="Формат: (096) 999 99 99" — это пожалуй самое крутое, мало того что подсказка показывается при наведении, она также вылазит если кликнули по кнопке когда ничего не заполнено(см. картинку ниже)
Туда-сюда, наконец-то мы добрались до того момента, что нужно грамотно оформить наш скрипт, привожу полный листинг файла script.js :
Как Вы смогли заметить у нас добавилась проверка if(!is_mobile()) — тоесть когда пользователь зашел на сайт не с мобильного устройства в разметке происходят следующие изменения: удаляются атрибуты title , pattern , required , добавляется класс rfield (проверяемое поле).
Результат
Заключение
Теперь мы умеем не напрягаясь проверять поле телефона любой формы. Ваши пожелания, полезные и не очень правки моих скриптов, оставляйте в комментариях! Делитесь статьей в социальных сетях! Спасибо за внимание!
Обновление 26.04.2017
Выше приведенный код слегка устарел, поэтому я обновил исходники и ниже выкладываю листинг обновленного скрипта и разметки (стили смотрите в исходниках они особо не обновлялись).
Об изменениях: скрипт is-mobile.js я отключил — бесполезная штука, masked input работает и на мобильных устройствах (версию в исходниках обновил до 1.4.1), и код скрипта получился более читаемым и понятным. Также изменилась разметка атрибут pattern у input'ов я убрал за ненадобностью.
Обновленная разметка
Обновленный скрипт
Чуть объяснений: задаем переменную $body ; находим все инпуты с телефонами — задаем им маску и указываем параметр не очищать при потере фокуса; отслеживаем событие нажатия кнопок в поле телефона — если заполнено то у кнопки отправки формы удаляется атрибут disabled , в противном случае добавляется.
Заключение 2
Как написать функцию для инпута, чтобы был ввод номера номера телефона вот такого формата:
Подключена библиотека JQuery. Нашел плагин jquery.inputmask-multi.min.js, но не пойму что и как и где писать.
Минус я вам поставил за вопрос. Потому что не видно, чтобы вы пытались самостоятельно решить данную задачу(где ваш код). Всего вам доброго!
@AlexandrKazakov интересный подход: поставлю минус потому что вы не старались, но напишу решение чтобы срубить плюсиков в репутацию.
@websnap Здравствуйте! Мое решение верное, как мне кажется. Я потратил на него время. Я сделал даже больше, а именно: написал корректный pattern . Я поставил минус вопросу и написал комментарий, почему я это сделал. Все это я сделал в весьма доброжелательной манере. Ваше недовольство удивительно для меня. Еще более удивителен ваш минус за мой ответ. Всех вам благ!
Читайте также: