Маска для полей формы.Маски ввода для текстовых полей

В этой записи я покажу вам плагин который создает маску для поля input. С помощью данного плагина вы сможете сделать маску поля для телефона, даты, или любого другого. Вы можете сделать любую маску. Плагин называется — jquery.maskedinput

Ссылка на плагин — https://github.com/digitalBush/jquery.maskedinput

Из всего списка файлов нам нужен только jquery.maskedinput.js, который находится в папке dist.

HTML

Здесь нам нужно подключить плагин и библиотеку jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.maskedinput-master/dist/jquery.maskedinput.js"></script>

Далее нужно прописать просто тег input, которому нужно указать уникальный id. Этот id мы в дальнейшим будем использовать в jquery скрипте.

<input id="phone1" type="text">

JavaScript(jQuery)

JavaScript код необходимо прописать в самом низу HTML кода. Здесь мы прописываем функцию, в которой указываем маску для нашего поля.

$("#phone1").mask("8(999) 999-99-99");

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

Дополнительные возможности плагина

Выполнение дополнительного кода после заполнения поля

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

$("#phone3").mask("8(999) 999-99-99", {
    //ЭТОТ КОД ВЫВЕДЕТ СООБЩЕНИЕ ПОСЛЕ ЗАПОЛНЕНИЯ ПОЛЯ 
    completed: function(){ console.log('Поле заполнено'); }
});

Выбор маски пользователем

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

Для этого нужно изменить HTML код

<div class="form-group">
    <label for="phone">Телефон: </label>
    <select id="country" class="form-control">
        <option value="ru"><img src="">Россия +7</option>
        <option value="ua">Украина +380</option>
        <option value="by">Белоруссия +375</option>
    </select>
    <input id="phone" type="text" class="form-control">
</div>

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

$(function() {
        function maskPhone() {
            var country = $('#country option:selected').val();
            switch (country) {
                case "ru":
                    $("#phone").mask("+7(999) 999-99-99");
                    break;
                case "ua":
                    $("#phone").mask("+380(999) 999-99-99");
                    break;
                case "by":
                    $("#phone").mask("+375(999) 999-99-99");
                    break;
            }
        }
        maskPhone();
        $('#country').change(function() {
            maskPhone();
        });
    });

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

HTML

Для телефона 1: <input  id="phone1" type="text" class="form-control">
<hr>
Для телефона 2: <input  id="phone3" type="text" class="form-control">
<hr>
Для даты: <input  id="date" type="text" class="form-control">
<hr>
Для даты(без разделителя):<input  id="index" type="text" class="form-control">
<hr>
Число с плавающей точкой: <input  id="number" type="text" class="form-control">
<hr>
Число с плавающий точкой(обязательно с "+" или "-" вначале): <input  id="number2" type="text" class="form-control">
<hr>
Для кода цвета:
<input  id="color" type="text" class="form-control">
<hr>
Для выбора маски из списка:
<hr>
<div class="form-group">
    <label for="phone">Телефон: </label>
    <select id="country" class="form-control">
        <option value="ru"><img src="">Россия +7</option>
        <option value="ua">Украина +380</option>
        <option value="by">Белоруссия +375</option>
    </select>
    <input id="phone" type="text" class="form-control">
</div>

JavaScript(jQuery)

    //Для телефона 1
    $(function(){
        $("#phone1").mask("8(999) 999-9999");
    });

    //Для телефона 2
    $("#phone3").mask("8(999) 999-99-99", {
        completed: function(){ alert("Вы ввели номер: " + this.val()); 
    }
    });

    //Для даты
    $("#date").mask("99.99.9999", {placeholder: "дд.мм.гггг" });

    //Для даты(без разделителя)
    $("#index").mask("999999", {placeholder: " " });

    //Для числа с плавающей точкой
    $("#number").mask("0.9?9");

    //Для числа с плавающий точкой(обязательно с "+" или "-" вначале)
    $.mask.definitions['~']='[+-]';
    $("#number2").mask("~9.99");

    //Для кода цвета
    $.mask.definitions['h']='[A-Fa-f0-9]';
    $("#color").mask("#hhhhhh");

    //Для выбора маски из списка:
    $(function() {
        function maskPhone() {
            var country = $('#country option:selected').val();
            switch (country) {
                case "ru":
                    $("#phone").mask("+7(999) 999-99-99");
                    break;
                case "ua":
                    $("#phone").mask("+380(999) 999-99-99");
                    break;
                case "by":
                    $("#phone").mask("+375(999) 999-99-99");
                    break;
            }
        }
        maskPhone();
        $('#country').change(function() {
            maskPhone();
        });
    });