Маска ввода номера телефона

Маска для ввода номера телефонаДобрый день. Сегодня мы еще немного улучшим наши формы обратной связи. Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь - это может быть полезно с точки зрения безопасности сайта.

Мы не позволим вводить в поле лишние символы, а во вторую - пользователю будет понятно в каком именно формате мы хотим получить от него данные. Например, дату рождения, номер телефона и т.д.

Для того, чтобы вы понимали о чем речь:

Маска номера телефона

Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной  последовательности.

Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать - это подключить библиотеку jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:

<script src="js/maskedinput.js"></script>

Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:


<script type="text/javascript">
   jQuery(function($){
   $("#phone").mask("(999) 999-9999");
   });
</script>

Где #phone - идентификатор поля с номером телефона, а .mask("(999) 999-9999") - маска. Цифра девять означает, что в данном поле можно будет вводить только цифры от 0 до 9.

<input type="text" id="phone" name="phone" placeholder="Введите ваш телефон">

Кроме того, можно сделать запись с уже прописанным кодом страны, который будет выводится по умолчанию:

$("#phone").mask("+7(999) 999-9999");

Например:

Маска ввода номера телефона

Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:

  • a — Все алфавитные значения (A-Z,a-z) или (A-Я,a-я). Если не сработает, попробуйте убрать запятую.
  • 9 — Все цифровые значения (0-9)
  • * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

А на сегодня - все. Всем - пока. Эксперементируйте с масками. Вы обязательно найдете им достойное применение.

Всем, кто искал альтернативу или "баг" мешает нормальному приему заявок, рекомендую почитать эту статью.

54 комментария

  1. Евгений

    Статья реально полезная, внедрил, результатом доволен. Респект автору

    1. dimadv7

      Как раз работа с твоим сайтом и вдохновила на написание этой статьи))

  2. Влас

    JS Выдает ошибку "Uncaught TypeError: undefined is not a function"

  3. Алексвандр

    А как добавить русские буквы?

    1. dimadv7

      Привет. Заменить на A-Яa-я, и все будет в порядке)) Спасибо, добавлю в статью, чтоб понятнее было)

  4. RobertTack

    Классная статья, пользуюсь случаем и хочу пропиарить свой первый проект, _https://vk.com/flokirovanie_na_zakaz_kharkov Буду рад посещению в группу

  5. Антон Гулин

    Маска работает, а как сделать так, чтобы на сервер отправлялись числа без маски?
    то есть в поле вводится тел вида (987) 987-87-87, а на сервер отправляется 9879878787

    1. Rsutem

      удали все ненужные символы кроме чисел и все )

    2. Андрей

      Антон Гулин, Получи значение поля. Преобразуй в массив. Перебери. На каждой итерации проверяй число ли это, если не число - удали символ. В итоге получишь массив из чисел в нужном порядке. Преобразуй его в строку тем же циклом.

      Хотя может есть способ проще это сделать. Это первое что в голову пришло.

  6. Петр

    всё подключил, но один хуй, ничего не поменялось

  7. Андрей

    Подскажите, как сделать, чтобы каретка при наборе номера всегда откатывалась влево, чтобы клиент не мог случайно начать писать свой номер с середины, теряя последние цифры номера? Просто были такие случаи)

  8. Андрей

    Спасибо, Дима.
    Реально полезная вещь.

  9. Максим

    У меня возникает такая ошибка в консоли
    TypeError: jQuery(...).mask is not a function
    Библиотека jQery есть
    скрипт maskedinput скачал и подключил
    Это вставил в head

    jQuery(document).ready(function() {
    jQuery("#Number").mask("(999) 999-9999");

    });

    Не работает + таймер пропадает. В чем может быть проблема?

    1. dimadv7

      В конфликте скриптов

  10. Максим

    Что можно сделать?

    1. dimadv7

      Для начала, нужно понять так ли это, пробовать отключать другие скрипты и проверять работает ли. Если заработает, то нужно попробовать обновить их до свежих версий, если не поможет, то пытаться понять в чем может быть причина, возможно придется искать аналогичные.

    2. SS

      Попробуйте дать права файлу maskedinput

  11. Максим

    Дмитрий,вы не знаете, где можно альтернативу посмотреть?

    1. dimadv7

      альтернативу какому скрипту?

  12. Максим

    Дмитрий я тестировал, убрал все скрипты, вс еравно не пашет, я не понимаю,. Может быть я установил что-то не так.

    1. dimadv7

      Может быть у вас jQuery 2 раза подключен? Аналогов maskedinout - не знаю.

  13. Максим

    Дмитрий maskedinout

  14. Денис

    required внутри поля так и матюкается, даже если поле заполнено...как исправить, не хочу использовать скрипты для проверки на заполненность...мне и css3 хватает
    Как исправить? помогите!

    1. dimadv7

      Не должно оно ругаться, что-то не так делаете. Сейчас проверил, при попытке отправить, сразу открывается шаблон для ввода номера. После его заполнения, форма успешно отправляется.

  15. Артем

    Как грамотнее сделать чтобы несколько полей с одной маской использовать - присваиваю один и тот же ID последующие просто не работают (((

    1. dimadv7

      Использовать разный айди, или пользуйся классами. 2 одинаковых айди (по спецификации), вообще не допустимы на странице.

  16. Алексей

    Скажите, а как преобразовать пример если на странице несколько одинаковых форм? Как вместо id (#) использовать классы?

    1. dimadv7

      Вместо решетки использовать точку:

      $(".phone").mask("(999) 999-9999");
  17. andrgame.net

    Чем короче длина значимых символов в маске ввода, тем маска ввода считается меньше и располагается выше.

  18. светлана

    Не могу скачать плагин maskedinput.js.
    помогите.....

    1. dimadv7

      Каким образом помочь?

    2. dimadv7

      Заходите на сайт, жмете Minified, копируете себе - все)

  19. Лариса

    дякую!

  20. Олег

    У меня на одной странице, через ?php include вставлено две формы. Работает данный скрипт только на одной. Почему? Вроде форма одна и таже.

  21. Олег

    Всё разобрался

    1. Виталий

      и в чем проблема была? у меня тот же прикол.....

  22. Данил

    ReferenceError: Can't find variable: jQuery
    (анонимная функция)maskedinput.js:7:144
    (анонимная функция)maskedinput.js:8

    TypeError: $("#phone").mask is not a function. (In '$("#phone").mask("+7(999) 999-9999")', '$("#phone").mask' is undefined)
    (анонимная функция)index.html:14
    fjquery.js:1029
    fireWithjquery.js:1138
    readyjquery.js:427
    xtjquery.js:97

    Выше две ошибки, которые отдает консоль

    jQuery(function($){
    $("#phone").mask("+7(999) 999-9999");
    });

    А вот код моей страницы, не могу понять, что не так делаю((
    подскажите пожалуйста

  23. Андрей

    Плагин хороший, но есть некоторые косяки. Во-первых, при повторном клике по полю - введенные данные стираются. А во-вторых, на мобилках во время ввода курсор перескакивает по всей маске и в итоге все цифры перемешиваются, а когда хочешь поставить курсор в нужное место - всплывает предыдущая проблема, все стирается.

    Не знаете ли Вы хорошей альтернативы этому плагину, без таких нюансов?

  24. Андрей

    Все клёво работает, спасибо! Но есть одно "но". Скрипт конфликтует с плагином Crayon Syntax Highlighter (который, кстати, насколько я понимаю, используется и на данном сайте). Т.е. при активации плагина Crayon маска перестаёт работать. Может эту проблему можно как-то исправить, но у меня не получилось.

  25. Сергей Архипов

    У тех у кого ошибка типа TypeError: jQuery(…).mask is not a function

    есть решение, вместо доллара пишите jQuery
    будет что то типа этого

    jQuery(document).ready(function(){
    jQuery("input[type=tel]").mask("+7(999) 999-9999");
    });

  26. Жека

    На мобилках плохо работает. При вводе номера цыфры перемешываються((.

    1. Михаил

      Причем не на всех мобилах. У меня и у жены Андроиды. У меня браузер Хром, у нее штатный, который был в LG. У меня каретка при вводе телефонного номера (+7 ___ ___-__-__) ведет себя некорректно (для правильного ввода приходится в местах пробелов и дефисов нажимать кнопку «пробел» на клавиатуре), на телефоне жены — правильно работает (как и с компьютеров). В мобильном Хроме вместо:

      +7 903 123-45-67

      выводит

      +7 903 234-67-51

      И как починить, неясно :(

      Версия Masked Input 1.4.1

    2. Orsey

      Михаил, точно такая же проблема. Использовал при написании модуля формы обратной связи Ajax Webfactor Form для Joomla, и такой косяк вылез, пока что советую тем кто использует форму не ставить тип поля tel если есть мобильная версия сайта.

      Кстати разработчик скрипта об этой проблеме знает, но пока телится что-то фиксить (

  27. AAA

    подобные маски это реальный бред... А если у человека телефон имеет вид +7 (xxxx) ... то как он его введёт? Ну или он вообще не с РФ.

    1. dimadv7

      Добавь в маску +7, в чем проблема, не нужен +7, сделай маску такой, какая нужна, в чем проблема?

  28. Роман

    Класс, спасибо! Реально сработало

  29. Ирина

    Как сделать, чтобы маска поддерживала два формата ввода?

    1. dimadv7

      Привязывайтесь к классу поля, и задавайте любую маску для его ввода.

  30. Александр

    Было бы хорошо, если бы работало на Маску \валидацию Emailа.

  31. Роман

    А как сделать так, чтобы при нажатии на маску курсор всегда перемещался в начало, а то проблема с этим. Хотелось бы, чтобы курсор сам всегда вставал в начало, куда бы я не нажал изначально

    1. dimadv7

      Роман, воспользуйтесь этой статьей: Маски ввода номера телефона

  32. Петр

    При быстром наборе текста, курсор не успевает перемещаться в конец, соответственно номер вводится уже не правильно, как сделать так, чтобы курсор не перескакивал

    1. Петр

      Петр, P.s. Этим грешит конкретно jQuery. Imaskjs Вроде как работает в этом плане лучше. https://smartlanding.biz/demo/mask-phone/

  33. Александр

    Подскажите как в четвертой Джумле подключить файл скрипта?
    Метод, описанный в статье не подходит.

Добавить комментарий