Маска ввода номера телефона

Добрый день. Сегодня мы еще немного улучшим наши формы обратной связи. Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь - это может быть полезно с точки зрения безопасности сайта.

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

Для того, чтобы вы понимали о чем речь:

Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной  последовательности.

Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать - это подключить библиотеку jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:

<script src="js/maskedinput.js"></script>

Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:

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

Где #phone - идентификатор поля с номером телефона, а .mask("(999) 999-9999") - маска. Цифра девять означает, что в данном поле можно будет вводить только цифры от 0 до 9.

<input type="text" id="phone" name="phone" placeholder="Введите ваш телефон">

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

$("#phone").mask("+7(999) 999-9999");

Например:

Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:

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

А на сегодня - все. Всем - пока. Эксперементируйте с масками. Вы обязательно найдете им достойное применение.

Всем, кто искал альтернативу или "баг" мешает нормальному приему заявок, рекомендую почитать эту статью.