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

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

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

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

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

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 35

  1. Евгений

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

    • dimadv7

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

  2. Влас

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

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

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

    • dimadv7

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

  4. RobertTack

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

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

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

    • Rsutem

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

  6. Петр

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

  7. Андрей

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

  8. Андрей

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

  9. Максим

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

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

    });

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

    • dimadv7

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

  10. Максим

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

    • dimadv7

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

    • SS

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

  11. Максим

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

    • dimadv7

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

  12. Максим

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

    • dimadv7

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

  13. Максим

    Дмитрий maskedinout

  14. Денис

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

    • dimadv7

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

  15. Артем

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

    • dimadv7

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

  16. Алексей

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

    • dimadv7

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

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

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

  18. светлана

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

    • dimadv7

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

    • dimadv7

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

  19. Лариса

    дякую!

  20. Олег

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

  21. Олег

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

  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»);
    });

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

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