Маска ввода в полях формы на jQuery
Скрипт jQuery Masked Input «Masked Input Plugin» написанный на jQuery служит для проверки вводимых данных в форме (form).
Установка: Подключаем библиотеку jQuery и плагин jquery.maskedinput (рекомендую подключать после закрывающего тега body).
Для тега input c id="phone" создаем маску:
$("#phone").mask("+7 (999) 999 - 9999");
Значения для создания маски: a - буквы алфавита (A-Z,a-z) 9 - цифры (0-9) * - буквы и цифры (A-Z,a-z,0-9)
Примеры маски ввода masked input
Проверка поля телефона в форме для Тайланда. Код части формы - поле для ввода номера телефона.
<label for="phone">หมายเลขโทรศัพท์ (e.g. = +6638428600):</label> <input class="form-control input-form " name="phone" id="phone" placeholder="+66" type="tel" required="" oninput="javascript: if (this.value.length >= this.maxLength) this.value = this.value.slice(0, this.maxLength);" type = "number" maxlength = "13" minlength="11" >
Загружаем код после закрывающего тега body. Маска запрещает менять первые символы +66 и требует обязательного ввода 10 цифр и плюс, 11 цифра не обязательна для ввода. Форма номера +66XXXXXXX(X).
</body> <script src="js/jquery.maskedinput.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.mask.definitions['~'] = "[+-]"; $("#phone").mask("+6699999999?9",{placeholder:" "}); }); </script>
Убираем очистку поля
По умолчанию если пользователь не завершил ввод данных, они сбрасываются. Для отмены убираем очистку поля:
$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false});
Прописать свой placeholder
По умолчанию на место ввода значения ставится знак подчеркивания, для его замены нужно прописать свой placeholder:
$("#phone").mask("+7 (999) 999 - 9999",{placeholder:" "});
Выполнить функцию после завершения ввода
Плагин также может выполнить функцию после завершения ввода:
$("#phone").mask("+7 (999) 999 - 9999",{completed:function(){alert("ОК!");}});
Маска ввода в полях формы на jQuery
Оригинал статьи Маска ввода в полях формы на jQuery
Masked input — очередной плагин предназначенный для всеми горячо любимого javascript фремворка jQuery, он позволяет облегчить жизнь вам и вашим пользователям, тем что с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п.
Плагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.
И так, что же нужно сделать для того, что бы начать использовать данный плагин на своем сайте? Для начала подключите javascript файлы jQuery и плагина к вашей странице, выглядеть это будет примерно так:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>
Далее нужно вызвать функцию плагина для всех элементов формы для которых надо создать маску, и передать в нее необходимые параметры:
jQuery(function($){ $("#date").mask("99/99/9999"); $("#phone").mask("(999) 999-9999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999"); });
Функция плагина принимает 2 параметра первый — сама маска для ввода, второй — объект дополнительных параметров. Маска ввода представляет из себя строку состоящую из спец символов:
a — трактуется как буквенный символ из диапазона (A-Z,a-z) 9 — трактуется как числовой символ (0-9) * — трактуется как алфавитно цифровой символ (A-Z,a-z,0-9)
Все символы кроме перечисленных выше трактуются как литералы.
В объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он равен _, к примеру вы захотели изменить его на пробел, тогда ваш код вызова функции плагина будет выглядеть примерно так:
jQuery(function($){ $("#product").mask("99/99/9999",{placeholder:" "}); });
Так же в качестве дополнительного параметра можно указать функцию обратного вызова, которая будет вызвана после того как все элементы маски будут заполнены, например:
jQuery(function($){ $("#product").mask("99/99/9999",{completed : function(){ alert("Вы ввели: "+this.val());} }); }); Вы мож
ете использовать свои определения для спецсимволов маски ввода к примеру, вы хотите что бы пользователь мог указывать разность или сумму чисел тогда вы можете сделать это следующим образом:
jQuery(function($){ $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999"); });
Иногда бывают такие ситуации, что возникает потребность не заполнять пользователем некоторую часть маски ввода, для этого вы можете использовать спецсимвол ? — все что идет после этого символа является не обязательным для ввода с стороны пользователя, например:
jQuery(function($){ $("#phone").mask("(999) 999-9999? x99999"); });
Вот это наверное и все основные возможности данного плагина, используйте его в своих проектах и вы сделаете жизнь неопытного пользователя маленечко проще :)
📌 Для тестирования скриптов, установщиков VPN, Python ботов рекомендуем использовать надежные VPS на короткий срок. Если вам нужна помощь с более сложными задачами, вы можете найти фрилансера, который поможет с настройкой. Узнайте больше о быстрой аренде VPS для экспериментов и о фриланс-бирже для настройки VPS, WordPress. 📌
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Китайский VPN Shadowsocks простая установка и настройка
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах