Макса ввода для input полей формы HTML


Все мы сталкиваемся с тем что пользователи как хотят так и заполняют поля форм, или просто их пропускают. С тем что бы поля все необходимые поля заполнялись нам поможет валидация форм.

А вот для того что бы пользователи заполняли данные формы по определенной маске например номер телефона с кодом пробелами и тире:

+7 (999) 999-9999

Нам поможет плагин masked input.

Для работы плагина необходимо подключение jQuery

Сайт плагина где можно его скачать и познакомится с документацией http://digitalbush.com/projects/masked-input-plugin/.

Настройка masked input

Подключаем jQuery и файл скрипта плагина:

<!-- библиотека jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- плагин Masked Input -->
<script src="js/jquery.maskedinput.min.js"></script>

Создаем поле input для например для указания номера телефона и зададим маску ввода:

<!-- Текстовое поле для ввода номера телефона -->
<input type="text" name="phone" id="phone" >
<!-- Настройка маски ввода -->
<script type="text/javascript">
$(function(){
  //элемент, к которому необходимо добавить маску
  $("#phone").mask("+7 (999) 999-9999");
});
</script>

Создания маски ввода осушествляется в js коде с помощью следующих знаков:

  • Цифра 9 – соответствует цифре от 0 до 9.
  • Символ a – представляет собой любой английский символ (A-Z, a-z).
  • Знак * - представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

Так же если вы ходите что бы в качестве маски не указывался знак подчеркивания «_» , можно воспользоваться параметром placeholder:

<!-- Текстовое поле для ввода даты -->
<input type="text" name="date" id="date" >
<!-- Настройка маски ввода -->
<script type="text/javascript">
$(function(){
  //элемент, к которому необходимо добавить маску
  $("#date").mask("99.99.9999", {placeholder: "дд.мм.гггг" });
});
</script>

Так же у данного плагина имеется еще один полезный параметр completed. Он служит для указания действия которое будет выполнено когда пользователь закончит ввод данных по маске. Его можно использовать например что бы ajax запросом проверить наличие данного номера в базе. В примере мы просто вызовем alert и сообщим что именно введено в поле:

<!-- Текстовое поле для ввода номера телефона -->
<input type="text" name="phone" id="phone" >
<!-- Настройка маски ввода -->
<script type="text/javascript">
$(function(){
  //элемент, к которому необходимо добавить маску + Использование параметра completed
  $("#phone").mask("+7 (999) 999-9999", {
    completed: function(){ alert("указан : " + this.val()); }
   });
});
</script>

Более подробно с возможность плагина можно ознакомится на странице автора MASKED INPUT PLUGIN.

#jQuery

Copyright © 2013-2017