
Очень часто на сайтах необходимо контролировать, что ввел пользователь в поле input ввода номера телефона. Существует множество вариантов, для каждого сайта подойдет свой. Все зависит от требований к маске ввода телефона.
Сегодня рассмотрим несколько вариантов:
- На чистом js
- С использованием jQuery
Маска телефона на чистом JS
На легких веб-ресурсах, где не используется фреймворк jquery, подойдет вариант на чистом javascript. Это позволяется минимизировать затраты использования ресурсов браузера и объем загружаемых ресурсов.
Более того, такой скрипт можно вставить непосредственно в сам Html документ, без необходимости подключения лишних js файлов и библиотек.
Требования к скрипту:
- Скрипт должен работать без лишних библиотек.
- Скрипт должен быть максимально гибким.
- Скрипт должен быть легко подключаемым.
Демонстрация работы скрипта:
Код скрипта на js
Данный код написан на vanilla javascript, без использования дополнительных библиотек и фреймворков.
В сжатом виде код выглядит более компактно:
Как подключить
Самый простой вариант подключения, это пряма вставка кода в html страницу между тегами <head>
Второй вариант. Создать пустой файл с расширением .js и вставит код скрипта в него. Далее подключить уже сам файл между тегами <head>
Допустим мы создали файл mask.js, вставили в него наш код и загрузили на сайт. Тогда подключение скрипта к сайту будет выглядеть примерно так:
Как использовать
Скрипт работает с атрибутами элемента input, т.е. для того, чтобы скрипт применил маску к инпуту ввода номера телефона, вам необходимо прописать data атрибут.
В самом скрипте, уже имеется дефолтная маска вида: '+7 (___) ___-__-__'. Если вам необходим другой вид, то указываем свою в атрибуте data-phone-pattern.
Скрипт автоматически стирает некорректно введеный номер телефона в поле, при потере фокуса.
data-phone-clear = "false" - указывает скрипту, что не надо стирать данные в поле input, даже если пользователь ввел телефон не полностью. (Не знаю зачем это надо, но мало ли).
Примеры использования атрибутов:
Теперь единственное, что необходимо сделать, это очистить данные от мусора на стороне сервера. Так как в поле телефона присутствуют не очень нужные символы (типа скобок и прочерков, пробелов), то когда вы принимаете POST данные в скрипте php, можно применить функцию замены ненужных символов.
К примеру, у нас имя поля input было phone
Маска телефона на jQuery
Если на сайте уже используется framework jQuery, то можно использовать более компактный код. Он использует функции обертки самого фреймворка, что немного упрощает код.
Подключение и использование данного варианта скрипта, аналогично как и у варианта на чистом JS. Смотрите выше.
Компактный вид:
Вот и все. Пользуйтесь.
Комментарии: 3
вечер убил чтоб исправить ошибку отображения ввода телефона на АНДРОЙД при использовании jquery.maskedinput.min.js (миллион вариантов и все через задницу!)
и ту все получилось !
СПАСИБО ОГРОМНОЕ
Добавить комментарий