В настоящее время на многих web-сайтах предусмотрена возможность отправки форм обратной связи, некоторые поля которых предназначены для передачи контактных данных или другой типовой информации. Очень часто бывает важно чтобы эти данные приходили на сервер в едином формате. В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

Отличительные особенности и возможности плагина Masked Input:

Плагин масок полей ввода состоит из основных частей:

Пример установки плагина Masked Input

Скачайте архив с плагином из репозитория разработчика и скопируйте его содержимое в каталог вашего сайта.

!!! Для работы скрипта обязательно наличие подключенной библиотеки jQuery.

Инициализация и настройка плагина Masked Input.

Подключите к документу фреймворк jQuery и сам плагин. Обратите внимание, что ранние версии плагина могут не работать с более поздними версиями jquery.

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

Для подключения маски к полю ввода необходимо добавить соответствующий класс или id:

<form action="/">
	<input class="date" type="text" name="name"><br>
	<input class="phone" type="text" name="name"><br>
	<input class="phoneext" type="text" name="name"><br>
	<input class="tin" type="text" name="name"><br>
	<input class="ssn" type="text" name="name"><br>
	<input class="product" type="text" name="name"><br>
	<input class="eyescript" type="text" name="name"><br>
	<button type="submit" name="submitbtn" value="Отправить">Отправить</button>
</form>

И инициализировать плагин маски ввода:

<script>
jQuery(function($){
	$('.date').mask('99/99/9999');
	$('.phone').mask('(999) 999-9999');
	$('.phoneext').mask("(999) 999-9999? x99999");
	$(".tin").mask("99-9999999");
	$(".ssn").mask("999-99-9999");
	$(".product").mask("a*-999-a999");
	$(".eyescript").mask("~9.99 ~9.99 999");
});
</script>

Базовые условные обозначения:

Часть маски может быть вариативной. Символ «?» маркирует все последующие за ним символы как необязательные, т.е. все, что следует после него, считается необязательным для ввода. Пример:

$('.phoneext').mask("(999) 999-9999? x99999");

Дополнительные настройки плагина

1. Возможность создания собственных наборов символов для ввода.

Для создания наборов символов используется свойство definitions, пример:

<script>
$(document).ready(function(){
	$.mask.definitions['~']='[+-]';
	$(".eyescript").mask("~9.99 ~9.99 999");
})
</script>

2. Выполнение действия после завершения ввода.

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

<script>
$(document).ready(function(){
	$(".ssn").mask("999-99-9999",{completed:function(){alert(“Поле заполнено!”)}});
})
</script>

3. Подстановка плейсхолдера в поле ввода.

С помощью свойства placeholder, можно поставить плейсхолдер на текущее поле ввода, пример:

<script>
$(document).ready(function(){
	$(".date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
})
</script>

Заключение

Пожалуй, это вся необходимая информация для эффективного использования плагина jquery MaskedInput. Всем спасибо за внимание!

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Плагин DateTimePicker для сайта - инструкция, настройка, инициализация

05/02/2019

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта - инструкция, настройка, инициализация
Публикация на стене Вконтакте средствами API - кросспостинг

24/03/2017

Метод который мы рассмотрим ниже позволяет размещать информацию на страницах любого пользователя или группы к которому имеет доступ авторизованному пользователю.

Публикация на стене Вконтакте средствами API - кросспостинг
Чтение excel на PHP - основные методы класса PHPExcel

03/11/2016

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое, выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP - основные методы класса PHPExcel
TinyMCE вырезает теги - исключения для тегов TinyMCE

21/09/2016

Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.

TinyMCE вырезает теги - исключения для тегов TinyMCE
Cвойства и методы TinyMCE - вставка тегов, вывод значений

21/09/2016

Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.

Cвойства и методы TinyMCE - вставка тегов, вывод значений
Установка и настройка TinyMCE - инициализация и параметры

21/09/2016

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE - инициализация и параметры
Установка и настройка jCarousel - параметры и методы

20/09/2016

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации; рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel - параметры и методы
Инструкция SMTP PHPMailer - свойства и методы класса

20/09/2016

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие, кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: "Писать или не писать smtp клиент с нуля?".

Инструкция SMTP PHPMailer - свойства и методы класса