Как заставить пользователя вводить номер телефона в правильном формате? Есть множество интересных решений, но заставлять пользователя совершенно не надо — пусть за пользователя основную работу делают машины :-) На помощь приходит замечательный скрипт «Masked Input Plugin», который позволяет назначить для каждой формы маску, по которой данные будут заполнятся. Возможно Вы не совсем поняли, но лучше один раз увидеть, чем сто раз услышать.

Установка

Как вы уже поняли, для начала нам понадобится скрипт «Masked Input Plugin» написанный на jQuery, его размер поистине радует 2.8 килобайта.

1. Скачиваем сам сам скрипт и библиотеку jQuery (если она еще не подключена). Закидываем их в папку сайта.
2. Подключаем эти файлы на страницу

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

3. Активируем скрипт как в примере И так, пример активации скрипта:

   <script type="text/javascript">
   jQuery(function($){
      $("#phone").mask("+7 (999) 999-9999");
   });
   </script>
   

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

Настройки

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

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

Теперь более расширенный функции:

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Этот скрипт позволяет заменить стандартный символ нижнего подчеркивания на любой, который вы хотите, в данном случае он заменяется на пробел.

Query(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("Вы ввели: "+this.val());}});
});

Этот позволяет исполнять любую функцию по заверению ввода в форму.