• Главная»
  • Уроки»
  • jQuery»
  • Определение маски для формы

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

demosourse

Шаг 1.

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

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

Шаг 2.

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

<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" />

Маска для формы готова! Надеюсь, этот урок был для вас полезен!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник input урока: www.digitalbush.com
Перевел: Сергей Патин
Урок создан: 5 Октября 2009
Просмотров: 89779
Правила перепечатки

  • Анимация набора текста на jQuery

    Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

  • Временная шкала на jQuery

    jQuery плагин для создания временной шкалы.

  • Заметка: Перезагрузка и редирект на JavaScript

    Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

  • Рисуем диаграмму Ганта

    jQuery плагин для создания диаграммы Ганта.

  • AJAX и PHP: загрузка файла

    Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете


Источник: https://ruseller.com/lessons.php?rub=32&id=424


Поделись с друзьями



Рекомендуем посмотреть ещё:


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

Маскируем и проверяем поле телефона с помощью jQuery Сценария праздника по здоровью для начальной школы

Как сделать маску для input Как сделать правильную маску Masked Input для ввода email
Как сделать маску для input Как сделать маску из картона своими руками
Как сделать маску для input Маска ввода для HTML элемента input ИТ Шеф
Как сделать маску для input Определение маски для формы
Как сделать маску для input Тег
Как сделать маску для input 100 лучших идей: Как сделать красивую шкатулку своими руками
Как сделать маску для input Cosa sono i Big Data: esempi concreti della vita
Как сделать маску для input Skype Вопросы и Ответы - Skype и VoIP в


ШОКИРУЮЩИЕ НОВОСТИ