Smartlanding

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

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

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

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

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

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

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

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

  • Евгений

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

    Ответить
  • dimadv7

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

    Ответить
  • Влас

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

    Ответить
  • Алексвандр

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

    Ответить
  • dimadv7

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

    Ответить
  • RobertTack

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

    Ответить
  • Антон Гулин

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

    Ответить
  • Rsutem

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

    Ответить
  • Петр

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

    Ответить
  • Андрей

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

    Ответить
  • Андрей

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

    Ответить
  • Максим

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

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

    });

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

    Ответить
  • dimadv7

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

    Ответить
  • Максим

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

    Ответить
  • dimadv7

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

    Ответить
  • Максим

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

    Ответить
  • dimadv7

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

    Ответить
  • Максим

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

    Ответить
  • Максим

    Дмитрий maskedinout

    Ответить
  • dimadv7

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

    Ответить
  • Денис

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

    Ответить
  • dimadv7

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

    Ответить
  • Артем

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

    Ответить
  • dimadv7

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

    Ответить
  • SS

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

    Ответить
  • Алексей

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

    Ответить
  • dimadv7

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

    $(".phone").mask("(999) 999-9999");
    Ответить
  • andrgame.net

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

    Ответить
  • светлана

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • Лариса

    дякую!

    Ответить
  • Олег

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

    Ответить
  • Олег

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

    Ответить
  • Данил

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

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

    Ответить
  • Андрей

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

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

    Ответить
  • Андрей

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

    Ответить
  • Виталий

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

    Ответить
  • Сергей Архипов

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

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

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

    Ответить
  • Жека

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

    Ответить
  • Михаил

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

    +7 903 123-45-67

    выводит

    +7 903 234-67-51

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

    Версия Masked Input 1.4.1

    Ответить
  • Orsey

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

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

    Ответить
  • AAA

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

    Ответить
  • Роман

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

    Ответить
  • dimadv7

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

    Ответить
  • Ирина

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

    Ответить
  • dimadv7

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

    Ответить

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