+7 926 070-36-31
Москва и Московская область

JQuery. Маска для ввода данных

19.04.2018

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

Ознакомиться с данным плагином можно на странице GitHub здесь.

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

/*подключаем jquery*/
<script src="jquery-3.2.1.min.js"></script>

/*подключаем плагин*/
<script src="jquery.maskedinput.min.js"></script>

<script>
$(document).ready(function() { /*добавляем маску к input с ID = phone*/
$("#phone").mask("+7 (999) 999-99-99");
})
</script>
Результат будет такой


Теперь рассмотрим подробнее и на примере. Маска задается в команде mask()

$("#phone").mask("+7 (999) 999-99-99");
В ней можно прописать следующие служебные символы:
  • a - соответствует любым буквам (A-Z,a-z)
  • 9 - соответствует числам (0-9)
  • * - соответствует любому символу (A-Z,a-z,0-9)
Поэтому в маске телефона мы указываем +7 как не изменяемые символы и через число 9 отмечаем какие числа в каком виде надо вводить.

Так же можно передавать параметры помимо маски. Например, можно передать подсказку, т.е. placeholder или функцию, которая будет вызываться при успешном заполнении маски.

/*Допишем вызов функции при заполнении маски телефона, которая выведет окно с текстом и номером телефона*/
$("#phone").mask("+7 (999) 999-99-99",{
     completed:function()
     {
         alert("Поле заполнено: "+this.val());
     }
});
 А теперь создадим форму с маской и посмотрим на примере работу с ней.

Создаем файл mask.php и подключаем в нем файлы jquery и плагин Masked Input Plugin for jQuery, которые заранее скачали и разместили в ту же папку, где создали файл mask.php.

<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.maskedinput.min.js"></script>
Создаем простую форму в файле. Для примера будем запрашивать телефон и СНИЛС посетителя.

<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<table>
<tr>
<td>
<label>Телефон</label>
</td>
<td>
<input id="phone" type="text" name="phone" value="<?=$phone?>" size="20" />
</td>
</tr>
<tr>
<td>
<label>СНИЛС</label>
</td>
<td>
<input id="snils" type="text" name="snils" value="<?=$snils?>" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="add_in_edit" value="Отправить"></td>
</tr>
</table>
</form>
Согласно форме полученные данные будут передаваться в этот же файл (action="<?=$_SERVER['PHP_SELF']?>") методом POST.

Теперь добавим в файл скрипт, который создаст нашу маску для полей.

<script>
$(document).ready(function() {
$("#phone").mask("+7 (999) 999-99-99"}); //маска для телефона
$("#snils").mask("999-999-999 99"); //маска для СНИЛС
})
</script>
Давайте проверим как отработает маска. Позже сделаем обработку полученных данных из формы.


При нажатии на поле, подставляется маска и мы заполняем поле только разрешенными символами. Так как в маске мы указали какие символы можно использовать, то не разрешенные символы Вы ввести уже не сможете. Попробуйте в поле телефона указать буквы, не получится.

И теперь добавим обработку формы на php. В начале файла вставляем код.

<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
if (isset($_POST['phone'])) {
$phone = htmlentities(strip_tags($_POST['phone']));
echo "Телефон: ".$phone."<br>";
}
if (isset($_POST['snils'])) {
$snils = htmlentities(strip_tags($_POST['snils']));
echo "СНИЛС: ".$snils."<br>";
}
}

?>
Логика скрипта: 
1) Если нам передали данные методом POST, проверяем есть ли переменные содержащие телефон ($_POST['phone']) и СНИЛС ($_POST['snils']).
2) Если есть телефон, то убираем возможные теги и экранируем данные (для защиты) перед сохранением в переменную и выводит полученный телефон на экран.
3) Если есть СНИЛС, то убираем возможные теги и экранируем данные (для защиты) перед сохранением в переменную и выводит полученный СНИЛС на экран.


Так мы с Вами сделали простую форму получения данных с маской ввода и их обработки для дальнейшего использования.

Полный текст скрипта приложен ниже и размещен в архиве для скачивания.

<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
if (isset($_POST['phone'])) {
$phone = htmlentities(strip_tags($_POST['phone']));
echo "Телефон: ".$phone."<br>";
}
if (isset($_POST['snils'])) {
$snils = htmlentities(strip_tags($_POST['snils']));
echo "СНИЛС: ".$snils."<br>";
}
}


?>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.maskedinput.min.js"></script>

<script>
$(document).ready(function() {
$("#phone").mask("+7 (999) 999-99-99");
$("#snils").mask("999-999-999 99");
})
</script>

<h3>Пример работы с маской ввода</h3>

<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<table>
<tr>
<td>
<label>Телефон</label>
</td>
<td>
<input id="phone" type="text" name="phone" value="<?=$phone?>" size="20" />
</td>
</tr>
<tr>
<td>
<label>СНИЛС</label>
</td>
<td>
<input id="snils" type="text" name="snils" value="<?=$snils?>" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="add_in_edit" value="Отправить"></td>
</tr>
</table>
</form>


Файл: Код урока Загрузить

Возврат к списку

  • Хотите быть в курсе добавления новых видео?
  • Хотите участвовать в выборе тем уроков?
Подписывайтесь!


6лет
опыта
разработки
49
выполненых
проектов
100%
клиентов
нас рекламируют своим друзьям
6 лет
разрабатываю
сервисы для Гос органов

Новое на сайте

Мои последние записи из блока связанных с разработкой сайтов на битрикс и прочие статьи. Заходите!