Создание, продвижение сайтов
компьютерная поддержка
53-02-63

Определение маски для формы

15 июня 2017

В этом уроке мы рассмотрим создание маски для ввода данных в форму. Это даст возможность пользователям сайта вводить данные в определенном формате и никак иначе

Шаг 1.

Для этого нужно подключить к документу фреймворк jQuery и соответствующий плагин:

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

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

Шаг 2.

Далее вставим код, определяющий маски нашим формам:3

<script type="text/javascript">

jQuery(function($) {

$.mask.definitions['~']='[+-]';

$('#date').mask('99/99/9999');

$('#phone').mask('(999) 999-9999');

$('#phoneext').mask("(999) 999-9999? x99999");

$("#tin").mask("99-9999999");

$("#ssn").mask("999-99-9999");

$("#product").mask("a*-999-a999");

$("#eyescript").mask("~9.99 ~9.99 999");

});</script> 

Вы можете определить маску так, как вам угодно.

9 - обозначает любую цифру, а - любую букву латинского алфавита, * - любой знак.

Определить значение символов вы также можете сами. Для этого в плагине jquery.maskedinput-1.2.2.js нужно изменить следующие строки:

definitions: {

'9': "[0-9]",

'a': "[A-Za-z]",

'*': "[A-Za-z0-9]"

Заменив [A-Za-z] на [A-Яa-я], получим возможность вводить кириллические символы вместо латинских.

Шаг 3.

При создании поля для ввода данных просто прописываем ему нужный идентификатор маски.

Например:

<input id="date" type="text" />

Маска для формы готова!

На CMS Drupal есть модуль Masked Input

Узнайте о нас больше:

Мы предлагаем широкий спект услуг по сайтам и компьютерной поддержке

Создание сайтов

Мы разрабатываем как простые сайты - визитки, так и индивидуальные проекты. Основная система разработки - CMS Drupal.

Узнать подробнее

Продвижение сайтов

Одно из основных направлений работы нашей компании - продвижение сайтов в Саратове и области. Мы поможем Вам с SEO - продвижением сайтов и настройкой и ведением контекстной рекламы в Яндекс Директ.

Бесплатная SEO-консультация

Компьтерная поддержка

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

  • Настройка роутеров и локальных сетей
  • Установка Windows
  • Оптимизация работы компьютеров
  • Лечение вирусов
  • Восстановление данных с жестких дисков
Узнать подробнее
Сделайте заказ с сайта и получите 10% скидку на услугу

Заказ услуги с сайта raybin.ru

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
Заказать бесплатную SEO-консультацию

Запрос бесплатной SEO - консультации с сайта raybin.ru

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
Письмо в компанию Райбин

Письмо в компанию RAYBIN

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности