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

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

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

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

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

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

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

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

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

51 комментарий

  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. Дмитрий Давыдов

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

    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. Дмитрий Давыдов

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

  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. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности