Маска ввода телефона для полей input

Маска ввода телефона для полей input

17 февраля 2020 JavaScript

На данный момент маски ввода телефона, как например +7 (___) ___ — __ повсеместно используются на сайтах. Это исключает ошибки при вводе и проверке вводимых данных, а так же приводит сбор данных к единому формату. Как просто сделать такую и другие маски ввода рассмотрим в этой статье.

Для создания маски в полях ввода существуют различные плагины jQuery. На мой взгляд самый лучший и быстрый вариант это плагин jQuery Inputmask от Robin Herbots. Он стабильно работает и у него большое количество возможностей и настроек.

Создание маски ввода с помощью плагина jQuery Inputmask

Скачиваем плагин отсюда. Там же находится полная документация по настройке плагина. И подключаем к сайту скрипт jquery.maskedinput.min.js из папки dist. Перед скриптом конечно же нужно подключить библиотеку jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/jquery.inputmask.min.js"></script>

Теперь вызываем функцию маски ввода и указываем в ней шаблон ввода, например +7 (999) 999-9999. Код необходимо разместить перед закрывающим тегом </body>.

<script>
$(document).ready(function(){
  $(".phone").inputmask("+7 (999) 999-9999");
});
</script>

Теперь маска ввода телефона по этому шаблону будет работать у всех полей, у которых будет указан class="phone":

<input type="text" placeholder="Ваш номер телефона" class="phone" name="phone" />

В шаблоне можно задавать все, что угодно: цифры, буквы, символы и т.д. Самые часто используемые это цифры и буквы. В шаблоне 9 — это любая цифра от 1 до 9; A — это любая буква. Например:

<script>
$('.phone').inputmask('999[-AAA]');
</script>

Так же маску ввода можно задать непосредственно в самом input с помощью атрибута data-inputmask:

<input data-inputmask="'mask': '+7 (999) 999-9999'" />
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы. HTML-код формы Добавляем в форму ещё одно поле файл: <form id="feedback-form" action=""> <input type="text" name="name" required placeholder="Ваше имя"> <input Читать далее

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

*

code