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

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

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

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

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

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

Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать - это подключить библиотеку 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)

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

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

50 комментариев

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

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

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

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

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

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

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

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

  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. В конфликте скриптов

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

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

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

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

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

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

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

  13. Дмитрий maskedinout

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

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

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

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

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

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

      $(".phone").mask("(999) 999-9999");
  17. Чем короче длина значимых символов в маске ввода, тем маска ввода считается меньше и располагается выше.

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

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

    2. Заходите на сайт, жмете 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. Михаил, точно такая же проблема. Использовал при написании модуля формы обратной связи Ajax Webfactor Form для Joomla, и такой косяк вылез, пока что советую тем кто использует форму не ставить тип поля tel если есть мобильная версия сайта.

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

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

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

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

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

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

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

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

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности