Маски ввода полей html

Содержание

Макса ввода для input полей формы HTML
Настройка masked input
Маска ввода для HTML элемента input
Подключение плагина
Создание HTML маски ввода
Настройка маски ввода Masked Input
Пример создания маски ввода телефона
Комментарии: 67
Маска ввода для полей HTML форм на jQuery
Подключение masked input
Создание HTML маски ввода

Макса ввода для input полей формы HTML

Все мы сталкиваемся с тем что пользователи как хотят так и заполняют поля форм, или просто их пропускают. С тем что бы поля все необходимые поля заполнялись нам поможет валидация форм.

А вот для того что бы пользователи заполняли данные формы по определенной маске например номер телефона с кодом пробелами и тире:

Нам поможет плагин masked input.

Для работы плагина необходимо подключение jQuery

Сайт плагина где можно его скачать и познакомится с документацией http://digitalbush.com/projects/masked-input-plugin/.

Настройка masked input

Подключаем jQuery и файл скрипта плагина:

Создаем поле input для например для указания номера телефона и зададим маску ввода:

Создания маски ввода осушествляется в js коде с помощью следующих знаков:

Цифра 9 – соответствует цифре от 0 до 9.
Символ a – представляет собой любой английский символ (A-Z, a-z).
Знак * — представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

Так же если вы ходите что бы в качестве маски не указывался знак подчеркивания «_» , можно воспользоваться параметром placeholder:

Так же у данного плагина имеется еще один полезный параметр completed. Он служит для указания действия которое будет выполнено когда пользователь закончит ввод данных по маске. Его можно использовать например что бы ajax запросом проверить наличие данного номера в базе. В примере мы просто вызовем alert и сообщим что именно введено в поле:

Более подробно с возможность плагина можно ознакомится на странице автора MASKED INPUT PLUGIN.

Источник

Маска ввода для HTML элемента input

Плагин masked input предназначен для установления маски ввода элементу input с помощью кода JavaScript. Данный плагин для своего функционирования требует наличие подключённой библиотеки jQuery. Скачать плагин jquery.maskedinput.js ( jquery.maskedinput.min ) можно посредством следующей ссылки:

Подключение плагина

После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script :

Создание HTML маски ввода

Создания маски ввода осушествляется в js коде с помощью следующих знаков:

Цифра 9 – соответствует цифре от 0 до 9.
Символ a – представляет собой любой английский символ (A-Z, a-z).
Знак * — представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

Например рассмотрим процесс создания маски ввода телефона для элемента input , имеющего id=»phone» :

Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:

Кроме placeholder данный плагин имеет ещё параметр completed . Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.

Например, выведем с помощью метода alert сообщение пользователю, когда он завершит ввод маски телефона:

Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак ‘?’ . Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.

Например, пользователю необходимо ввести число от 0 до 0.99 . При этом обязательным для заполнения является указание хотя бы одного знака после запятой.

Настройка маски ввода Masked Input

Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков ( 9 , a , * ) свои собственные.

Например, создадим для маски специальный символ ~ , который при вводе должен быть заменён на знак ( + ) или минус ( — ).

Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:

Пример создания маски ввода телефона

Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:

 Телефон:

Комментарии: 67

Нам нужна маска на форму геткурс, чтобы номер автоматом записывался +972 (999) 999-999

Мы пробуем по вашей инструкции, но у нас не получается.

Мы загрузили плагин в файловое хранилище геткурса, поставили скрипт в HEAD, установили скрипт в форме. Но форма при проверке исчезает и не дает даже проверить.

А какой плагин установить в библиотеку надо и в в страницу в раздел Head?

Здравствуйте, Александр.
Подскажите, пожалуйста, а как можно сделать в маске, чтобы joxi.ru/brRQYe0s7ejDOA
тут нельзя было вбить 8

К примеру, клиент кликает на инпут и не видит, что там маска, и начинает все равно с 8 вбивать
и получается, что +7 (892) 6-- — --
т.е. неверный номер в итоге.
Как это можно сделать?

Для маскирования телефона у меня стоит 1.79kb скрипт на нативном .js примерно как «Сбербанк в приложении для Android», не нужны никакие библиотеки и jQvery:
window.addEventListener(«DOMContentLoaded», function() );
i = new_value.indexOf("_");
if (i != -1) {
i < 5 && (i = 3);
new_value = new_value.slice(0, i)
}
var reg = matrix.substr(0, this.value.length).replace(/_+/g,
function(a) {
return "\\d{1," + a.length + "}"
}).replace(/[+()]/g, "\\$&");
reg = new RegExp("^" + reg + "$");
if (!reg.test(this.value) || this.value.length < 5 || keyCode >47 && keyCode < 58) this.value = new_value;
if (event.type == «blur» && this.value.length < 5) this.value = ""
}
var input = document.querySelector("#tel1");
input.addEventListener(«input», mask, false);
input.addEventListener(«focus», mask, false);
input.addEventListener(«blur», mask, false);
input.addEventListener(«keydown», mask, false)

var input = document.querySelector("#tel2");
input.addEventListener(«input», mask, false);
input.addEventListener(«focus», mask, false);
input.addEventListener(«blur», mask, false);
input.addEventListener(«keydown», mask, false)
});

Id tel1 и tel2, если на странице 2 формы с input tel

Источник