Юзабильные формы обратной связи

Юзабильные формы обратной связи

Наверное перед каждым веб-мастером вставал вопрос, как заставить пользователя вводить информацию (номер телефона, дату и т.д.) в нужном формате, но заставлять пользователя совершенно не нужно — пусть за пользователя основную работу делает ПО.

На помощь приходет замечательный скрипт «Masked Input Plugin», который позволит назначить для каждого поля маску, по которой данные будут заполнятся в полях.
Для начала нам понадобится скрипт «Masked Input Plugin» написанный на jQuery, его размер  2.8 килобайта, содержит всего два файла: jquery.maskedinput.js и jquery.maskedinput.min.js

Первым делом подключаем упамянутые выше два файла, для этого в head прописываем следующий код:

        <script type="text/javascript" src="js/jquery.maskedinput.js" ></script>
        <script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>

Обратите внимание в src=”js/jquery.maskedinput.js” нужно указать актуальный для вашего сайта путь к файлу jquery.maskedinput.js

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

 
<script type="text/javascript">
jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});
</script>

Этот скрипт будет добавлять узнанную маску для форм с id: date, phone, tin, ssn.

Теперь о масках символов:

  • a — Все алфавитные значения (A-Z,a-z)
  • 9 — Все цифровые значения (0-9)
  • * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

 

Вкратце это все, если вам нужна более подробная информация вы можете найти ее на сайте автора этого  скрипта «Masked Input Plugin».

1 комментарий
Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *