Настраиваем поле формы телефон — jQuery
На самом деле я очень долго думал, как же назвать эту запись, чтобы ее было легче найти. Ведь по сути мы всего лишь создадим маску для поля ввода input, чтобы посетителям сайта было проще вводить номер телефона. Давайте сделаем это.
Чтобы создать маску для ввода телефонного номера, нам понадобится небольшой jquery скрипт - jquery.maskedinput, вес которого составляет чуть больше 4 кб. Уверен, это приемлемо для любого проекта:) Скачиваем скрипт, подключаем его, предварительно не забываем подключить свежую библиотеку jQuery. Кстати, с помощью этого небольшого скрипта можно создать маску для ввода не только телефона...
Теперь создадим простое поле ввода:
<input type="text" class="phone" placeholder="Введите телефон">На этом наша разметка закончена. Пришло время написать скрипт, который и будет выполнять всю работу:
$(function($){ $(".phone").mask("+7 (999) 999-9999"); });
Этот небольшой кусочек js-кода говорит о том, что поле с классом phone следует обрабатывать по маске ввода +7 (999) 999-9999, где 9 - любая цифра.
Помимо этого доступны следующие варианты ввода:
- a — Все алфавитные значения (A-Z,a-z)
- 9 — Все цифровые значения (0-9)
- * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)
Полный код страницы:
<!DOCTYPE html> <html> <head> <title>Создаем маску ввода для телефона</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.maskedinput.min.js" type="text/javascript"></script> <script> $(function($){ $(".phone").mask("+7 (999) 999-9999"); }); </script> </head> <body> <input type="text" class="phone" placeholder="Введите телефон"> </body> </html>
Если между вводимыми значениями нужно заменить стандартный символ пробела - _, то нужно использовать следующий код:
$(function($){ $(".phone").mask("+7 (999) 999-9999",{placeholder:" "}); });
В этом коде между кавычек placeholder:" " можно написать любой символ, который будет использоваться в качестве разделителя.
Также есть возможность выполнить какое-нибудь действие по успешному завершению ввода. Тогда код будет такой:
$(function($){ $(".phone").mask("+7 (999) 999-9999",{completed:function(){alert("Вы ввели: "+this.val());}}); });
Довольно удобная штука при правильном применении. Вот и все. Правильных и удобных полей ввода вам!