Маска телефона для поля input

В этой статье расскажу как можно сделать красивую маску телефона для поле input.

Установка:

Подключаем файлы:

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

Активируем скрипт:

<script type="text/javascript">jQuery(function($) {$('#date').mask('99/99/9999');$('#phone').mask('+7-999-999-99-99');$('#zakazphone').mask('+7-999-999-99-99');$("#date2").mask("99/99/9999",{placeholder:"-"});$("#phone2").mask("(999) 999-9999",{completed:function(){alert("Этого: "+this.val()+" достаточно!");}});});</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:" "}); });

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

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

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

Ну и на последок теперь в input поставить нужный id по которому хотим получать вывод.

<input id="phone" name="tel" value="">


Вот и все