unruss-sro.ru


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

Smartlanding / Usability landing page / Маска ввода номера телефона

13/01/2015 dimadv7 43

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

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

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

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

Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать - это подключить библиотеку 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)

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

Это интересно:

Usability landing page

Источник: http://smartlanding.biz/maska-vvoda-nomera-telefona.html


Закрыть ... [X]

Маска ввода номера телефона в форме обратной связи на вашем лендинг пейдж - Единорог из пластика



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