Главное - маски ввода нужно использовать максимально, чтобы упростить взаимодействие пользователя с интерфейсом и уменьшить количество возможных ошибок.

Плагин jQuery Maskedinput

Плагин можно взять тут: https://github.com/digitalBush/jquery.maskedinput/blob/master/dist/jquery.maskedinput.min.js

Он обновлялся достаточно давно, но до сих пор работает отлично.

Пример использования:

Подключаем библиотеки

<script src="jquery.js" type="text/jаvascript"></script>
<script src="jquery.maskedinput.js" type="text/jаvascript"></script>

Используем сам плагин

$jQuery(function($){
   $("#phone").mask("(999) 999-9999");
});

Параметры плагина

• 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("You typed the following: "+this.val());}});
});

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

jQuery(function($){ 
   $.mask.definitions['~']='[+-]'; 
   $("#eyescript").mask("~9.99 ~9.99 999"); 
});

Часть маски может быть необязательной (для разделения используется символ "?"):

jQuery(function($){ 
   $("#phone").mask("+9 (999) 999-99-99? x99999"); 
});

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

$.mask.definitions['h'] = "[A-Fa-f0-9]";

После этого определения вполне можно задавать собственные маски, например, на ввод HEX кода цвета

jQuery(function ($) { 
   $ ("#color"). mask("#hhhhhh"); 
});

12

12

---

Больше полезных материалов в нашем Telegram канале. Вступайте и будем на связи! https://t.me/bf_conversion