Кастомизация поля для ввода телефона

Кастомизация поля для ввода телефона весьма интересная штука для улучшения понимания того, что требуется пользователю ввести в поле для телефона. Это может быть как набор определенных цифр, так и определенный порядок этих цифр. Для того, чтобы сделать себе отличное поле для ввода пользователями телефона надо воспользоваться одним очень хорошим плагином, который работает на jQuery. Это плагин — Masked Input Plugin. Скачать можно здесь.

Что делает этот замечательный плагин. Он собственно внедряется в наш input, где мы запрашивает ввод телефона и показывает пользователю, что мы от него хотим получить. Например, вот такой набор +7 (906) 272-38-19, или иной набор символов. Это кстати, мой личный номер телефона для тех, кто хотел бы заказать у меня сайт. Ну это я так… к слову :).

Использование плагина Masked Input Plugin

Использовать плагин будем следующим образом.

1. Сначала подключаем его в <head> нашего сайта. Перед закрывающим тегом </head> пишем следующее:

<script src="jquery.maskedinput.js" type="text/javascript"></script>

Обратите внимание на пути к Вашему файла скрипта и убедитесь, что подключили jQuery.

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

jQuery(function($){
   $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Обратите внимание, что данный код надо располагать либо в файле скриптов, если у Вас он есть, либо, заключим в теги <script></script> поместить код перед закрывающим тегом </body>. Цифры в коде означают то, что можно вводить только цифры.

P.S. Иногда, так получается, что нужно получить доступ к input, который имеет тока определенный name. Тогда пишем код так.

jQuery(function($){
   $("input[name='phone']").mask("(999) 999-9999");
});

Если есть вопросы, задавайте их в форме ниже. Спасибо.

Метки: JavaScript

Разделение числа на разряды с помощью JavaScript

Как добавить произвольное поле в категорию woocommerce

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.

Последнее в блоге

Кастомизация поля для ввода телефона

Использование плагина Masked Input Plugin

Рубрики

Свяжитесь с нами уже сейчас