маски для полей

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

В этой записи я покажу вам плагин который создает маску для поля 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();
        });
    });
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

81
Оставить комментарий

avatar
81 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
78 Авторы комментариев
ShannonviamyAndreasijlShannonviamytreantincJeromepef Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
StepFoush
Гость

Comprar Cytotec En Estados Unidos [url=http://apcialisle.com/#]Buy Cialis[/url] Misoprostol Achat Ligne Buy Cialis Online Viagra Purchase

StepFoush
Гость

Walgreens Propecia Price Pharmacy [url=https://apcialisle.com/#]Cialis[/url] Estrogen Without A Prescription cialis online ordering Viagra Livraison En 24h

JanleF
Гость

Does Keflex Cure A Tooth Infection [url=https://apcialisle.com/#]Cialis[/url] Viagra Cialis Online Pharmacy Cialis Viagra Cialis Sante Canada

JanleF
Гость

Amoxicillin And Clavulanate Potassium Dose [url=https://buyciallisonline.com/#]buy cialis online without prescription[/url] Stress Tea buy real cialis online Lasix Sweden

Vikallpv
Гость

Доброго времени суток дамы и господа[url=https://aqua-jet.top]![/url] Наша фирма занимается свыше 10 лет продажей аква изделий для декора помещений в г.Львов. Вот основные виды продукции, которые мы можем предложить вам: 1)[url=https://aqua-jet.top]Водно пузырьковая панель[/url] – Уникальный декор, который заменит аквариум, и сделает уютной атмосферу в Вашем помещении. Данный вид аква конструкций отлично подходит для любого типа помещений. 2)[url=https://aqua-jet.top]Искусственный водопад по стеклу[/url]- Служит отличным решением для зонирования помещений в виде перегородок, как для жилых, так и для общественных помещений. Кроме того, Вы сделаете правильный выбор, если поставите такое изделие в кафе, ресторане или спа салоне, это придаст динамичности в Ваш интерьер и отлично… Подробнее »

RogelioCab
Гость
RogelioCab

buy cheap cialis uk https://canadianpharmacystorm.com viagra sale leeds

Denlxfe
Гость

Доброго времени суток друзья
Наша организация мы занимаем первое место по качеству и цене производства аква продукции в г.Львов. Вас может заинтерсовать:
[url=https://drive.google.com/file/d/1mq1pFhgixRuaotmr5A5IAQ0czSfRG–d/view?usp=sharing]Пузырьковая панель для дома[/url] – сделаете Ваше помещение уютнее и привлекательнее, создаст теплую релаксирующую обстановку.

+

Ilonlscw
Гость

Приветствую Вас господа
Наша фирма мы занимаем первое место по качеству и цене производства аква продукции в г.Львов. Вас может заинтерсовать:
[url=https://drive.google.com/file/d/1mq1pFhgixRuaotmr5A5IAQ0czSfRG–d/view?usp=sharing]водопад декоративный для дома
[/url] – сделаете Ваше помещение уютнее и привлекательнее, создаст теплую релаксирующую обстановку.

RobertCIP
Гость
RobertCIP

cheap cialis canadian http://tadmedz.com ordering cialis online legal

WilliamAcurn
Гость
WilliamAcurn

levitra to buy uk http://cialisxtl.com buy cialis online us pharmacy

Antonioici
Гость

Добрый день дамы и господа! Есть такой интересный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Более подробная информация размещена тут https://drive.google.com/file/d/14WNRakU9DtUUJSwzsL4smlzgF0mODipG/view?usp=sharing
Увидимся!

Vernoncrott
Гость
Vernoncrott

cheap viagra men https://viagrawithoutdoctorspres.com viagra sale london

Alonlsem
Гость

Доброго времени суток друзья
Наша фирма мы занимаем первое место по качеству и цене производства аква продукции в Днепре. Вас может заинтерсовать:
[url=https://drive.google.com/file/d/1mq1pFhgixRuaotmr5A5IAQ0czSfRG–d/view?usp=sharing]комнатные фонтаны и водопады
[/url] – сделаете Ваше помещение уютнее и привлекательнее, создаст теплую релаксирующую обстановку.

RobertIdeok
Гость
RobertIdeok

cheap viagra buy online canada pharmacy cheap viagra vancouver [url=https://edpillsphrm.com]buy generic ed pills online[/url] want buy cheap viagra

Andreasmej
Гость

Доброго времени суток дамы и господа! Предлагаем Вашему вниманию замечательный сайт для заказа бурения скважин на воду. Бурение скважин в Минске компанией АКВАБУРсервис – полный комплекс качественных и разумных по цене услуг. Заказывайте скважину для воды в АКВАБУРсервис – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам!
https://drive.google.com/file/d/1Y0zYtrRCia9jfU-BH3WPIbhph6HvwDRl/view?usp=sharing
От всей души Вам всех благ!

Andreasoqw
Гость

Приветствую Вас друзья! Есть такой интересный сайт для заказа бурения скважин на воду. Бурение скважин в Минске компанией АКВАБУРсервис – полный комплекс качественных и разумных по цене услуг. Заказывайте скважину для воды в АКВАБУРсервис – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам!
https://drive.google.com/file/d/1Y0zYtrRCia9jfU-BH3WPIbhph6HvwDRl/view?usp=sharing
От всей души Вам всех благ!

Andreasybi
Гость

Здравствуйте господа! Предлагаем Вашему вниманию интересный сайт для заказа бурения скважин на воду. Бурение скважин в Минске компанией АКВАБУРсервис – полный комплекс качественных и разумных по цене услуг. Заказывайте скважину для воды в АКВАБУРсервис – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам!
https://drive.google.com/file/d/1Y0zYtrRCia9jfU-BH3WPIbhph6HvwDRl/view?usp=sharing
Увидимся!

Andreaslsk
Гость

Здравствуйте товарищи! Предлагаем Вашему вниманию интересный сайт для заказа бурения скважин на воду. Бурение скважин в Минске компанией АКВАБУРсервис – полный комплекс качественных и разумных по цене услуг. Заказывайте скважину для воды в АКВАБУРсервис – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам!
https://drive.google.com/file/d/1Y0zYtrRCia9jfU-BH3WPIbhph6HvwDRl/view?usp=sharing
От всей души Вам всех благ!

Bogdanuoe
Гость

Привет господа[url=https://stekloelit.by]![/url]
Предлагаем Вашему вниманию изделия из стекла для дома и офиса.Наша организация ООО «СТЕКЛОЭЛИТ» работает 10 лет на рынке этой продукции в Беларуси.
Более подробная информация размещена https://drive.google.com/file/d/1M3yBV_X6avVPgF2FyJhEy5k9Xdyq9NUo/view?usp=sharing
От всей души Вам всех благ!

Bogdancqv
Гость

Добрый день друзья[url=https://stekloelit.by]![/url]
Предлагаем Вашему вниманию изделия из стекла для дома и офиса.Наша организация ООО «СТЕКЛОЭЛИТ» работает 10 лет на рынке этой продукции в Беларуси.
Более подробная информация размещена https://drive.google.com/file/d/1M3yBV_X6avVPgF2FyJhEy5k9Xdyq9NUo/view?usp=sharing
От всей души Вам всех благ!

Bogdandrc
Гость

Добрый день дамы и господа[url=https://stekloelit.by]![/url]
Предлагаем Вашему вниманию изделия из стекла для дома и офиса.Наша организация ООО «СТЕКЛОЭЛИТ» работает 10 лет на рынке этой продукции в Беларуси.
Более подробная информация размещена https://drive.google.com/file/d/1M3yBV_X6avVPgF2FyJhEy5k9Xdyq9NUo/view?usp=sharing
Увидимся!

JanleF
Гость

Cialis 200mg Pills [url=https://buyciallisonline.com/#]Buy Cialis[/url] Cialis Ou Viagra Effets Secondaires Buy Cialis Symptoms From Amoxicillin

Zelenazuo
Гость

Приветствую Вас дамы и господа[url=https://drive.google.com/file/d/1K0D8QNyDMF9jCbICrGUzRs2_Im60jpiS/view?usp=sharing]![/url]
Наша контора занимается свыше 10 лет изготовлением памятников из гранита в городе Минске.Основные направления и виды нашей деятельности:
Всегда рады помочь Вам!С уважением, PRIME GRANIT https://drive.google.com/file/d/1K0D8QNyDMF9jCbICrGUzRs2_Im60jpiS/view?usp=sharing

Elmerwah
Гость
Elmerwah

viagra cheap alternatives https://www.sildwithdoctorprescription.com viagra online generic cheap

Pavloszkb
Гость

Доброго времени суток друзья! Есть такой замечательный сайт для заказа бурения скважин на воду.Основной деятельностью нашей компании является обеспечение клиента качественной питьевой водой в достаточном количестве. [url=https://voda-da.by/]скважина на воду[/url],[url=https://voda-da.by/]бурение скважин на воду[/url], [url=https://voda-da.by/]скважина минск[/url],[url=https://voda-da.by/]скважина на воду цена[/url],[url=https://voda-da.by/]бурение скважин в минской области[/url],[url=https://voda-da.by/]ремонт скважин[/url] и [url=https://voda-da.by/]бурение скважин минск[/url].Поможем пробурить скважину, которая будет отвечать именно Вашим пожеланиям.Бурение скважин на воду в Минской области производится на глубину около 30-40 метров.Несмотря на это, непосредственный водозабор начинается уже с глубины 20-25 метров, удается получить 1-3 метров кубических в час. Компания «БурАвтоГрупп» использует современный роторный способ бурения, его можно использовать на самых разных грунтах. Ждем Вас у… Подробнее »

Antonioobz
Гость

Доброго времени суток дамы и господа! Есть такой интересный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Более подробная информация размещена тут https://drive.google.com/file/d/14WNRakU9DtUUJSwzsL4smlzgF0mODipG/view?usp=sharing
Увидимся!

Antoniolse
Гость

Добрый день господа! Предлагаем Вашему вниманию замечательный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Более подробная информация размещена тут https://drive.google.com/file/d/14WNRakU9DtUUJSwzsL4smlzgF0mODipG/view?usp=sharing
От всей души Вам всех благ!

Antoniobgs
Гость

Привет господа! Есть такой интересный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Более подробная информация размещена тут https://drive.google.com/file/d/14WNRakU9DtUUJSwzsL4smlzgF0mODipG/view?usp=sharing
От всей души Вам всех благ!

Pavlosqdy
Гость

Добрый день друзья! Есть такой интересный сайт для заказа бурения скважин на воду.Основной деятельностью нашей компании является обеспечение клиента качественной питьевой водой в достаточном количестве. [url=https://voda-da.by/]скважина на воду[/url],[url=https://voda-da.by/]бурение скважин на воду[/url], [url=https://voda-da.by/]скважина минск[/url],[url=https://voda-da.by/]скважина на воду цена[/url],[url=https://voda-da.by/]бурение скважин в минской области[/url],[url=https://voda-da.by/]ремонт скважин[/url] и [url=https://voda-da.by/]бурение скважин минск[/url].Поможем пробурить скважину, которая будет отвечать именно Вашим пожеланиям.Бурение скважин на воду в Минской области производится на глубину около 30-40 метров.Несмотря на это, непосредственный водозабор начинается уже с глубины 20-25 метров, удается получить 1-3 метров кубических в час. Компания «БурАвтоГрупп» использует современный роторный способ бурения, его можно использовать на самых разных грунтах. Ждем Вас у нас… Подробнее »

Antoniovks
Гость

Здравствуйте друзья! Предлагаем Вашему вниманию замечательный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Более подробная информация размещена тут https://drive.google.com/file/d/14WNRakU9DtUUJSwzsL4smlzgF0mODipG/view?usp=sharing
Увидимся!

DonaldSeasy
Гость
DonaldSeasy

buy cialis from canada online http://kaletra24.com – kaletra cheap viagra vipps

DonaldSeasy
Гость
DonaldSeasy

buy viagra http://alexa24ph.com – viagra substitute buy levitra cheap online

DonaldSeasy
Гость
DonaldSeasy

buy priligy viagra online http://hydroxychloroquine24.com – buy hydroxychloroquine online best place buy viagra

DonaldSeasy
Гость
DonaldSeasy

cialis wholesale prices http://kaletra24.com – kaletra cialis sale sydney

DonaldSeasy
Гость
DonaldSeasy

buy levitra online cheap http://zithazi.com – buy Azithromycin is it legal to order viagra online in canada

DonaldSeasy
Гость
DonaldSeasy

cheap quality viagra http://zithazi.com – Azithromycin cheapest generic cialis canada

DonaldSeasy
Гость
DonaldSeasy

best place buy generic cialis online http://kaletra24.com – buy generic kaletra buy viagra online eu

DonaldSeasy
Гость
DonaldSeasy

viagra for sale in the philippines http://tadal24ph.com – generic cialis viagra over the counter

DonaldSeasy
Гость
DonaldSeasy

viagra sale amazon http://aralenph.com – aralen cheap quick viagra

DonaldSeasy
Гость
DonaldSeasy

female viagra buy uk http://alexa24ph.com – online viagra safe to order viagra online

DonaldSeasy
Гость
DonaldSeasy

how to buy viagra at boots http://zithazi.com – buy Azithromycin cheap cialis levitra

DonaldSeasy
Гость
DonaldSeasy

buy generic cialis online http://tadal24ph.com – buy cialis cheap viagra sale uk

DonaldSeasy
Гость
DonaldSeasy

order cialis mexico http://alexa24ph.com – generic viagra 100mg buying viagra online

DonaldSeasy
Гость
DonaldSeasy

viagra online order india http://alexa24ph.com – sildenafil buy generic cialis in usa

VirgilGuipt
Гость
VirgilGuipt
VirgilGuipt
Гость
VirgilGuipt

can you buy viagra in dubai
buy viagra

VirgilGuipt
Гость
VirgilGuipt

cialis for sale in philippines
buy sildenafil

VirgilGuipt
Гость
VirgilGuipt

buy viagra lloyds
buy sildenafil

VirgilGuipt
Гость
VirgilGuipt

cheap viagra sale
viagra

VirgilGuipt
Гость
VirgilGuipt

cialis pills toronto
sildenafil