Как использовать библиотеку jQuery Masked Input для работы с масками ввода?

Пользователь

от mona_terry , в категории: JavaScript , 8 месяцев назад

Как использовать библиотеку jQuery Masked Input для работы с масками ввода?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от nicola , 7 месяцев назад

@mona_terry 

Для использования библиотеки jQuery Masked Input нужно следовать простым шагам:

  1. Подключите библиотеку jQuery и jQuery Masked Input к файлу HTML:
1
2


  1. Добавьте в файл скрипта вызов функции maskedInput() для определенного поля ввода, указав маску:
1
2
3
$(document).ready(function(){
    $('#phone').mask("+7 (999) 999-99-99");
});


  1. В HTML-разметке добавьте поле ввода, указав атрибут "id" для него:
1


  1. Маска может быть создана разными способами. Например:
1
2
3
4
5
6
7
8
$('#date').mask('99.99.9999');
$('#time').mask('99:99');
$('#datetime').mask('99.99.9999 99:99');
$('#cep').mask('99999-999');
$('#phone').mask("+7 (999) 999-99-99");
$('#phoneext').mask("(999) 999-9999? x99999");
$('#tin').mask('99-9999999');
$('#ssn').mask('999-99-9999');


Маска указывается в параметре функции mask(). Символьные маски обозначаются символами "9" для цифр и "a" для букв. Символ "?" обозначает необязательный символ. Для обозначения маскирования всех символов используется символ "*".


Также можно использовать опции для настройки маски:

1
$('#zip').mask('99999-999', {placeholder: '_____-___'});


Данный пример показывает, как использовать опцию placeholder для замены знаков в маске на символ "_".


Дополнительные опции масок можно посмотреть на странице https://github.com/digitalBush/jquery.maskedinput.


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