Создание маски для заполнения текстовых полей с помощью плагина Masked Input Plugin

В статье будет рассказываться о том, каким образом можно создавать маски для текстовых полей. В данном случае выбран Masked Input Plugin, рассмотрена установка плагина и особенности его использования.

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

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

Установка

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

После подготовительной части кода нашего скрипта необходимо его программно подключить к нашему ресурсу. Для этого в head нужно вставить следующие строки кода

HTML

  <script type="text/javascript" src="maskedinput/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="maskedinput/jquery.maskedinput-1.3.min.js"></script>

В теле нашего документа для работы плагина необходимо простое текстовое поле для ввода с определенным классом, который привяжет его к скрипту

HTML

<div>
	<label>Дата рождения</label>
	<input type="text" class="date">
</div>

Завершающим этапом подключения плагина станет его инициализация. Этот пункт очень важный, так как без этого не будет работать скрипт. Также стоит отметить, что в коде инициализации вводится маска для заполнения нашего поля

JavaScript

	<script type="text/javascript">
		jQuery(function(){
			jQuery(".date").mask("99.99.9999");
		});
	</script>

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

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

Блог Vaden Pro

Создаем маски для заполнения текстовых полей

Установка