Добрый день. Сегодня мы еще немного улучшим наши формы обратной связи. Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь - это может быть полезно с точки зрения безопасности сайта. Мы не позволим вводить в поле лишние символы, а во вторую - пользователю будет понятно в каком именно формате мы хотим получить от него данные. Например, дату рождения, номер телефона и т.д.
Для того, чтобы вы понимали о чем речь:
Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.
Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать - это подключить библиотеку jQuery:
| 1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> |
Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:
| 1 | <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.
| 1 | <input type="text" id="phone" name="phone" placeholder="Введите ваш телефон"> |
Кроме того, можно сделать запись с уже прописанным кодом страны, который будет выводится по умолчанию:
| 1 | $("#phone").mask("+7(999) 999-9999"); |
Например:
Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:
- a — Все алфавитные значения (A-Z,a-z) или (A-Я,a-я). Если не сработает, попробуйте убрать запятую.
- 9 — Все цифровые значения (0-9)
- * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)
А на сегодня - все. Всем - пока. Эксперементируйте с масками. Вы обязательно найдете им достойное применение.
Это интересно
0
|
|||
Последние откомментированные темы:
-
Изменение ссылок
(1)
casham
,
01.02.2012
-
Плагин Special Text Boxes
(2)
Ирина
,
27.12.2011
-
Как закрыть ссылки от индексации быстро и красиво. Плагины WP-NoRef и WP No External Links.
(2)
-
Вышел WordPress 3.3 русская версия
(1)
casham
,
16.12.2011
-
Что нового в WordPress 3.3
(1)
casham
,
16.12.2011
-
10 сервисов для создания интересных продуктов на основе ваших фото из Instagram
(1)
Mike Kovalev
,
14.12.2011
20250423111752megr***@m*****.ru , 18.12.2011