Шаблон для номера телефона

Шаблон для номера телефона

Очень полезный аксессуар! И необходим каждому.

Думаю, что каждый согласится в том, что бывают ситуации когда ты просто вынужден припарковаться как идиот.
Почему как? А потому что автомобилей в городах стало просто неизмеримое множество. И каждый куда-то торопится. И каждому впадлу проехаться на автобусе либо метро (если оно есть в вашем городе).

Ладно, это как всегда лирика… И это уже не изменить.
Как часто вы пинали по колёсам какой-нибудь красненький матизик, хозяйка которого забежала на минуточку в магазин и уже час не выходит? Звонки в ГИБДД иногда дают пользу — просто в базе находят номер телефона собственника и звонят. Но! Это работает только в том случае, если при постановке на учет собственник не поленился вписать номер телефона.

Есть конечно еще один вариант, как практикуют это дело охранники на моей прошлой работе. Но думаю, что он никому не понравится.

У меня в таком случае всегда под рукой был листочек бумаги и ручка. По-быстрому писал свой номер и бросал эту бумажку под лобовое стекло.

Но ведь уже век современных технологий, и пора бы как-то поизысканнее делать подобные вещи…
Что-то я снова разошелся… пора бы для меня ограничить лимит букв в сообщении ))
И вот мы медленно подходим к сути:

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

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

Читайте также:  Как настроить цифры на клавиатуре справа

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery Masked Input Plugin позволяет создавать произвольные маски для вводимых данных в форму, например: дата, телефон, серийный номер и т.д.

Установка:

Подключаем библиотеку jQuery и плагин jquery.maskedinput:

Читайте также:  Почему не читает флешку на ноутбуке

Далее для инпута c id="phone" создаем маску:

Значения для создания маски:

a — буквы алфавита (A-Z,a-z)

* — буквы и цифры (A-Z,a-z,0-9)

Настройки:

По умолчанию если пользователь не завершил ввод данных, они сбрасываются. Для отмены убираем очистку поля:

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

Плагин также может выполнить функцию после завершения ввода:

Пример:
  • Опубликовано: 17.07.2018
  • Рубрики: Формы
  • Метки: jQuery
  • 7875 просмотров

Смотрите также:

Переключатель checkbox с фоновым изображением

Вариант использования фонового изображения на переключателе checkbox

Ползунок диапазонов jQuery UI Slider

Настройка, события, методы, вывод данных и классы ползунка диапазонов jQuery UI Slider

Адаптивная reCAPTCHA

Правильное отображение капчи reCAPTCHA на малых экранах и в узких блоках

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

Разделы:

Проверенный хостинг:

Работаю с ним более 10 лет!

Хостинг от 119 рублей в месяц
VDS от 45 рублей в месяц
10 дней для бесплатного тестирования
Неограничено почтовых ящиков и доменов
Бесплатный SSL сертификат

Ссылка на основную публикацию
Что можно делать с айфоном
Не отвлекать оповещениями, когда вы смотрите кино или отдыхаете. Не беспокоить. Вы можете включить режим «Не беспокоить» одним касанием. И...
Хрипит динамик на телефоне при прослушивании
Одной из самых распространенных поломок мобильных аппаратов является выход из строя динамика. Любой пользователь мобильных телефонов знает, что сейчас производители...
Хэнкок из какой вселенной комиксов
Хэнкок Общая информацияЖанр Научная фантастика Драма Комедия Страна производстваСШАКиностудия Columbia Pictures РежиссёрПитер БергАвтор сценария Винс Джиллиган Винсент Нго Когда вышел2008...
Что можно сделать из перебойника от компьютера
Всем привет! В общем валялся у меня в гараже ненужный компьютерный безперебойник, сначала хотел его выбросит. но потом разобрав я...
Adblock detector