В данной статье мы рассмотрим, как добавить маску для ввода данных в поля формы используя 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>