Jquery.maskedinput js

Примеры масок ввода

В таблице ниже приведены примеры использования масок ввода.

Обеспечивает ввод значения в виде

В данном случае пользователи должны вводить код города, так как в соответствующем разделе маски (000 в скобках) используется заполнитель 0.

(206) 555-0199( ) 555-0199

В этом случае в области междугородного кода используется местозаполнитель 9, поэтому междугородные коды необязательны. Кроме того, восклицательный знак (!) обусловливает заполнение маски слева направо.

Предоставляется возможность заменить буквами четыре последних цифры телефонного номера в формате США

Обратите внимание на местозаполнитель 0 в области кода города, который делает междугородный код обязательным

Любое положительное или отрицательное число, включающее не более четырех знаков и не имеющее разделителей тысяч и дробной части.

ЗЕЛЕНЫЙ339М3 МАЙ Р 452Б7

Сочетание обязательных (L) и необязательных (?) букв и обязательных цифр (0). Знак «больше» требует вводить все буквы в верхнем регистре. Чтобы использовать маску ввода этого типа, необходимо задать для типа данных поля таблицы значение Текстовый или Поле МЕМО.

Обязательный почтовый индекс и необязательная область четырехзначного расширения.

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

Общие сведения о масках ввода

Маска ввода — это строка символов, указывающая формат допустимых значений входных данных. Маски ввода можно использовать в полях таблиц или запросов, а также в элементах управления форм и отчетов. Маска ввода хранится в свойствах объекта.

Маску ввода рекомендуется использовать, когда вводимые значения должны иметь единый формат, например для полей с номерами телефонов из десяти цифр. Если пользователь введет номер, не указав код города, данные не будут приняты в Access, пока пользователь не добавит код города.

Три компонента маски ввода

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

Первый компонент является обязательным. Он представляет собой знак или строку (последовательность знаков) маски с заполнителями и литералами, например круглыми скобками, точками и дефисами.

Второй компонент не является обязательным и определяет способ хранения встроенных знаков маски в поле. Если для этого компонента задано значение 0, знаки сохраняются вместе с данными, а если 1, то знаки отображаются без сохранения. Выбрав значение 1, можно сэкономить место для хранения базы данных.

Третий компонент маски ввода также не является обязательным и определяет знак, используемый в качестве заполнителя. По умолчанию в Access используется знак подчеркивания (_). Чтобы задать другой знак, введите его в третьем компоненте маски.

Пример маски ввода для телефонных номеров в формате России: (999) 000-00-00 ;0 ;-:

В маске используются два заполнителя — 9 и 0. Заполнитель 9 обозначает необязательные цифры (код города можно не вводить), а 0 — обязательные.

Значение 0 во втором компоненте маски ввода указывает на то, что знаки маски следует хранить вместе с данными.

Третий компонент маски ввода указывает на то, что вместо знака подчеркивания ( _) в качестве заполнителя будет использоваться дефис ( -).

Подключаем скрипт для создания маски ввода.

Стандартная форма Elementor не имеет предустановленной маски ввода телефонного номера, поэтому для ее создания мы будем использовать jQuery-библиотеку jQuery Mask Plugin.

Для начала подключим jQuery Mask Plugin к нашему сайту.

Существует несколько способов подключения сторонних скриптов к WordPress, локально на страницу редактора, и глобально в тему. Давайте рассмотрим каждый способ от самого простого к сложному.

Первый способ подключения jQuery Mask Plugin.

Самый быстрый способ, это подключить скрипт и инициализировать (запустить) его прямо на страницу редактора, путем вставки кода в html-виджет Elementor.

Добавим виджет формы Elementor и html-виджет перед ней на страницу редактора Elementor.

Добавим нижерасположенный код в html-виджет.

Поэтому немного модифицируем нашу структуру страницы с примером. Для этого добавим два html-виджета: один перед формой, второй после формы. В первом мы подключим скрипт, во втором инициализируем.

В этом случае, скрипт маски ввода подключается непосредственно перед формой, а выполняется после.

Разъясним некоторые части кода.

По этому пути скрипт подключается на страницу.

Данная часть кода говорит о том, что для всех полей с типом «tel» применить определенный формат маски ввода

Второй способ подключения jQuery Mask Plugin.

Подключаем скрипт jQuery Mask Plugin через файл functions.php в теме, в нашем случае в теме Astra.

Для этого необходимо зайти в файловый менеджер хостинга, где размещен сайт, по пути

/www/ваш-сайт/wp-content/themes/astra

Для просмотра файлов вашего сайта можно использовать файловые менеджеры хостинг-панелей, или ftp-клиенты, например filezilla.

Далее находим и открываем файл functions.php.

Затем добавляем в конец этого файла следующий код

Таким образом мы подключим скрипт для всего сайта без необходимости его подключения непосредственно на странице редактора Elementor.

Далее нам останется запустить скрипт на странице путем добавления кода в html-виджет после формы:

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

Третий вариант использования jQuery Mask Plugin.

Данный вариант, на мой взгляд, самый удобный.

Для этого мы подключим скрипт в functions.php, как и во втором варианте, но запускать скрипт будем через WordPress-плагин Code Snippets Extended

Приступим.

Скачиваем и активируем плагин.

Жмем «Добавить сниппет», даем ему название и вводим код скрипта в поле снизу.

Код скрипта для вставки:

В хуках автозапуска в настройках сниппета обязательно укажите «Запускать после футера»

Вот и все, теперь скрипт маски для поля ввода номера телефона будет работать на всех страницах сайта.

Что такое jQuery Mask?

jQuery Mask – это плагин для создания масок полей форм и HTML-элементов ( maskedinput ). Плагин прост в использовании и дружелюбен к пользователям. Хотя он изменяет вводимые данные, он делает это, не меняя того, что видит пользователь.

Например, если вы напечатаете « 555-555-5555 » в поле ввода номера телефона, «-» просто будет пропущено. Плагин сам обработает введенные символы так, чтобы они соответствовали маске. Пройдемся по наиболее важным частям демонстрационного кода. Недавно я добавил в плагин две библиотеки:

Эти библиотеки добавлены в настройки на CodePen . Ссылки на них нужно прописать в коде проекта, чтобы он работал.

Чтобы наложить маску на ввод, нужно добавить селектор jQuery и функцию .mask( … ) или использовать атрибут HTML data-mask .

Селектор jQuery

Ниже показан пример, в котором используется селектор jQuery . В примеры с почтовым индексом и номером телефона также применяется этот метод, а в примере с номером страховки ( SIN number ) – атрибут data-mask .

Я использовал имя поля ввода, чтобы выбрать его, а затем наложил на него маску с помощью функции .mask( … ) . Она принимает последовательность чисел и букв и форматирует их с помощью регулярных выражений:

Но пользователь все еще может перепутать дни и месяцы. Поэтому для дат я все же рекомендую использовать Date Picker из jQuery UI .

Функция .mask( … ) знает как форматировать введенные данные определенным образом, потому что в плагине определен «словарь» символов. По умолчанию перевод следующий:

Если хотите переопределить или добавить что-то, руководствуйтесь следующим примеров, взятым из документации по jQuery Mask :

Атрибут данных HTML

Применение атрибута data похоже на использование селектора, только маску нужно вставить прямо в

. Когда пользуюсь этим плагином, то часто применяю данный метод в файлах шаблонов. Рассмотрим пример с номером страховки:

//»social-insurance» — социальная страховка

Использование jQuery Mask в WordPress

Для использования jQuery mask в WordPress , включите его в очередь скриптов в файле functions.php . Приведенный ниже код будет работать, если в теме есть папка /js :

Данная публикация представляет собой перевод статьи « Using jQuery Mask to Mask Form Input » , подготовленной дружной командой проекта Интернет-технологии.ру

Маска телефона в плагине WordPress Contact Form 7

3. Создаем форму в Contact Form 7

Например простейшую форму, как у меня, с одним полем, над которым будем работать

И вот код формы, если кому-нибудь нужно. Class form-flat это стили темы для формы, вам нужно использовать свои:

4. Теперь подключим скрипты

Есть самый простой и на мой взгляд не совсем правильный способ подключения скриптов. Мы просто открываем файл header.php или footer.php, которые расположены по адресу ваш-сайт/wp-content/themes/ваша-тема/ предварительно закинув туда файлы плагина, и вставляем код:

В директории мой-домен.com/wp-content/themes/ваша-тема/js/ создаем файл maskphone.js и вставляем код:

Обращаю ваше внимание, что используем идентификатор id. Если используем class, то в maskphone.js вставляем такой код:

Если используем class, то в maskphone.js вставляем такой код:

А в форму вставляем такой код:

Теперь у вас всё будет работать. Если же нет — проверяйте какие идентификаторы вы использовали.

4.1 Подключаем скрипты через файл functions.php

Я всегда использую только такой способ подключения скриптов и файлов css. Это очень удобно. Из проекта в проект на WordPress у меня перетекает кусочек кода и папка с файлами, которые я сейчас приложу для скачивания. Итак, открываем файл functions.php и между тегами

Стоит отметить, что код выше подходит для дочерней темы. Если же вы не используете дочернюю тему, то лучше использовать вот этот код:

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

General

set a value and apply mask

this can be done with the traditional jquery.val function (all browsers) or JavaScript value property for browsers which implement lookupGetter or getOwnPropertyDescriptor

$(document).ready(function(){
  $("#number").val(12345);

  var number = document.getElementById("number");
  number.value = 12345;
});

with the autoUnmaskoption you can change the return of $.fn.val (or value property) to unmaskedvalue or the maskedvalue

$(document).ready(function(){
  $('#<%= tbDate.ClientID%>').inputmask({ "mask": "d/m/y", 'autoUnmask' : true});    //  value: 23/03/1973
  alert($('#<%= tbDate.ClientID%>').val());    // shows 23031973     (autoUnmask: true)

  var tbDate = document.getElementById("<%= tbDate.ClientID%>");
  alert(tbDate.value);    // shows 23031973     (autoUnmask: true)
});

auto-casing inputmask

You can define within a definition to automatically apply some casing on the entry in an input by giving the casing.Casing can be null, «upper», «lower» or «title».

Inputmask.extendDefinitions({
  'A': {
    validator: "",
    cardinality: 1,
    casing: "upper" //auto uppercasing
  },
  '+': {
    validator: "",
    cardinality: 1,
    casing: "upper"
  }
});

Include jquery.inputmask.extensions.js for using the A and # definitions.

$(document).ready(function(){
  $("#test").inputmask("999-AAA");    //   => 123abc ===> 123-ABC
});

Masking types

These are the very basic of masking. The mask is defined and will not change during the input.

$(document).ready(function(){$(selector).inputmask("aa-9999");$(selector).inputmask({mask"aa-9999"});});

It is possible to define some parts in the mask as optional. This is done by using .

Example:

$('#test').inputmask('(99) 9999-9999');

This mask wil allow input like or .

Input => 12123451234 mask => (12) 12345-1234 (trigger complete)
Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)
Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)

As an extra there is another configurable character which is used to skip an optional part in the mask.

skipOptionalPartCharacter""

Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)

When is set in the options (default), the mask will clear out the optional part when it is not filled in and this only in case the optional part is at the end of the mask.

For example, given:

$('#test').inputmask('999');

While the field has focus and is blank, users will see the full mask . When the required part of the mask is filled and the field loses focus, the user will see . When both the required and optional parts of the mask are filled out and the field loses focus, the user will see .

When defining an optional mask together with the greedy: false option, the inputmask will show the smallest possible mask as input first.

$(selector).inputmask({ mask"9", greedyfalse});

The initial mask shown will be «_» instead of «_-____».

Dynamic masks can change during the input. To define a dynamic part use { }.

{n} => n repeats{n,m} => from n to m repeats

Also {+} and {*} is allowed. + start from 1 and * start from 0.

$(document).ready(function(){$(selector).inputmask("aa-9{4}");$(selector).inputmask("aa-9{1,4}");$(selector).inputmask({    mask"*{1,20}@*{1,20}",    greedyfalse,onBeforePastefunction(pastedValue,opts){      pastedValue =pastedValue.toLowerCase();returnpastedValue.replace("mailto:","");},    definitions{'*'{        validator"[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-",        cardinality1,        casing"lower"}}});});

The alternator syntax is like an OR statement. The mask can be one of the 2 choices specified in the alternator.

To define an alternator use the |.ex: «a|9» => a or 9 «(aaa)|(999)» => aaa or 999

Also make sure to read about the keepStatic option.

$("selector").inputmask("(99.9)|(X)",{  definitions{"X"{      validator"",      cardinality1,      casing"upper"}}});

or

$("selector").inputmask({  mask"99.9","X",  definitions{"X"{      validator"",      cardinality1,      casing"upper"}}});

You can define the mask as a function which can allow to preprocess the resulting mask. Example sorting for multiple masks or retrieving mask definitions dynamically through ajax. The preprocessing fn should return a valid mask definition.

$(selector).inputmask({maskfunction(){return"AAA-999","999-AAA";}});

Just in time masking. With the jitMasking option you can enable jit masking. The mask will only be visible for the user entered characters.
Default: false

Value can be true or a threshold number or false.

Inputmask("date",{ jitMaskingtrue}).mask(selector);

.NET Nuget Package Install

PM> Install-Package jQuery.InputMask

In App_Start, BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/inputmask").Include(
                        "~/Scripts/jquery.inputmask/jquery.inputmask-{version}.js",
						"~/Scripts/jquery.inputmask/jquery.inputmask.extensions-{version}.js",
						"~/Scripts/jquery.inputmask/jquery.inputmask.date.extensions-{version}.js",
						"~/Scripts/jquery.inputmask/jquery.inputmask.numeric.extensions-{version}.js"));

In Layout

@Scripts.Render("~/bundles/inputmask")

#=========== TODO ===========

getemptymask command

return the default (empty) mask value

$(document).ready(function(){
   $("#test").inputmask("999-AAA");
   var initialValue = $("#test").inputmask("getemptymask");  // initialValue  => "___-___"
});

onKeyUp / onKeyDown option

Use this to do some extra processing of the input when certain keys are pressed.
This can be usefull when implementing an alias, ex. decimal alias, autofill the digits when pressing tab.

see jquery.inputmask.extensions.js for some examples

onBeforePaste

This callback allows for preprocessing the pasted value before actually handling the value for masking. This can be usefull for stripping away some characters before processing.

$(document).ready(function(){
   $("#test").inputmask("99.", {
                repeat: 4,
                onBeforePaste: function (pastedValue) {
                    //do somehing with the value
                    return pastedValue;
                }
            });
});

onBeforeMask

This callback allows for preprocessing the initial value before actually handling the value for masking. This can be usefull for stripping away some characters before processing.

$(document).ready(function(){
   $("#test").inputmask("99.", {
                repeat: 4,
                onBeforeMask: function (initialValue) {
                    //do somehing with the value
                    return initialValue;
                }
            });
});

hasMaskedValue

Check whether the returned value is masked or not; currently only works reliably when using jquery.val fn to retrieve the value

$(document).ready(function(){
	function validateMaskedValue(val){}
	function validateValue(val){}

	var val = $("#test").val();
    if($("#test").inputmask("hasMaskedValue"))
	  validateMaskedValue(val); 
   else validateValue(val); 
});

С этим читают

Методы:

mask(elems)

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

$(selector).inputmask({ mask: "99-999-99"});

или

Inputmask({ mask: "99-999-99"}).mask(document.querySelectorAll(selector));

или

Inputmask("99-999-99").mask(document.querySelectorAll(selector));

или

var im : new Inputmask("99-999-99");
im.mask(document.querySelectorAll(selector));

или

Inputmask("99-999-99").mask(selector);

unmaskedvalue

Get the

$(selector).inputmask('unmaskedvalue');

или

var input = document.getElementById(selector);
if (input.inputmask)
  input.inputmask.unmaskedvalue()

Value unmasking

Unmask a given value against the mask.

var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "dd/mm/yyyy"}); //23031973

удаление

Удаление .

$(selector).inputmask('remove');

или

var input = document.getElementById(selector);
if (input.inputmask)
  input.inputmask.remove()

или

Inputmask.remove(document.getElementById(selector));

getemptymask

return the default (empty) mask value

$(document).ready(function(){
  $("#test").inputmask("999-AAA");
  var initialValue = $("#test").inputmask("getemptymask");  // initialValue  => "___-___"
});

hasMaskedValue

Проверьте маскируется ли возвращаемое значение или нет; В настоящее время только надежно работает при использовании jquery.val функции для извлечения значения

$(document).ready(function(){
  function validateMaskedValue(val){}
  function validateValue(val){}

  var val = $("#test").val();
  if ($("#test").inputmask("hasMaskedValue"))
    validateMaskedValue(val);
  else
    validateValue(val);
});

isComplete

Проверяет, осуществлен ли полный ввод значения или нет

$(document).ready(function(){
  if ($(selector).inputmask("isComplete")){
    //do something
  }
});

getmetadata

Метаданные фактической маски, представленной в определениях маски может быть получено с помощью вызова getmetadata. Если только маска при условии определения маски будет возвращен getmetadata.

$(selector).inputmask("getmetadata");

установка значения

SetValue функциональность, чтобы установить значение для inputmask, как вы могли бы сделать с jQuery.val, но это вызовет внутреннее событие, используемый inputmask всегда, в любом случае. Это особенно полезно при клонировании inputmask с jQuery.clone. Клонирование inputmask не является полностью функциональным клоном. На первом случае (MouseEnter, фокус …) сотрудник inputmask может обнаружить, если он где клонировали может активировать маскирование. Однако при установке значения с jQuery.val не существует ни одно из событий сработавших в этом случае. SetValue функциональность делает это для вас.

option(options, noremask)

Get or set an option on an existing inputmask.
The option method is intented for adding extra options like callbacks, etc at a later time to the mask.

When extra options are set the mask is automatically reapplied, unless you pas true for the noremask argument.

Set an option

document.querySelector("#CellPhone").inputmask.option({
  onBeforePaste: function (pastedValue, opts) {
    return phoneNumOnPaste(pastedValue, opts);
  }
});

$("#CellPhone").inputmask("option", {
  onBeforePaste: function (pastedValue, opts) {
    return phoneNumOnPaste(pastedValue, opts);
  }
})

Формат

Вместо того, чтобы маскировать входного элемента также можно использовать для форматирования inputmask для форматирования заданных значений. Подумайте о форматировании значений, чтобы показать в jqGrid или на других элементах затем вводит.

var formattedDate = Inputmask.format("2331973", { alias: "dd/mm/yyyy"});

var isValid = Inputmask.isValid("23/03/1973", { alias: "dd/mm/yyyy"});

Properties

$('#jqxMaskedInput').jqxMaskedInput({ disabled: true});

$('#jqxMaskedInput').jqxMaskedInput({ height: '25px'});

$('#jqxMaskedInput').jqxMaskedInput({ promptChar: "." });

$('#jqxMaskedInput').jqxMaskedInput({ readOnly: true });

$('#jqxMaskedInput').jqxMaskedInput({ textAlign: "right"});

$('#jqxMaskedInput').jqxMaskedInput({ width: '250px'});

Типы масок

Статические маски

Это очень простой базовый тип маски. Маска определяется и не будет меняться во время ввода.

$(document).ready(function(){
  $(selector).inputmask("aa-9999");  //static mask
  $(selector).inputmask({mask: "aa-9999"});  //static mask
});

Дополнительные маски

Можно определить некоторые части маски, как не обязательные. Это делается с помощью .

Пример:

$('#test').inputmask('(99) 9999-9999');

Эта маска разрешает ввод как или .

Input => 12123451234 mask => (12) 12345-1234 (trigger complete)
Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)
Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)

Пропуск необязательной части символов

В качестве дополнительного существует еще один конфигурируемый символ, который используется для пропуска дополнительной части в маске.

skipOptionalPartCharacter: " "

Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)

Когда устанавливается в настройках (по умолчанию), маска уберет необязательную часть, когда она не заполнена, и это только в случае, если необязательная часть находится в конце маски.

Например:

$('#test').inputmask('999');

В то время как поле находится в фокусе или не заполнено, пользователи будут видеть маску . Когда требуемая часть маски заполнена и поле теряет фокус, пользователь увидит . Когда обе части — обязательна и не обязательная части маски заполняются и поле теряет фокус, пользователь увидит .

Дополнительные части маски с greedy false

При определении опциональной части маски вместе с greedy: false опцией, inputmask покажет наименьшую возможную часть маски в качестве входных данных первого.

$(selector).inputmask({ mask: "9", greedy: false });

Исходная маска будет показана «_» вместо «_-____».

Динамические маски

Динамические маски могут изменяться в процессе ввода. Для определения динамической части маски используется { }.

{n} => n повторов{n,m} => от n до m повторов

Кроме того {+} и {*} тоже допускаются. + начинаются с 1 и * начинаются с 0.

$(document).ready(function(){
  $(selector).inputmask("aa-9{4}");    //статическая маска с динамическим синтаксисом
  $(selector).inputmask("aa-9{1,4}");  //динамическая маска ~ 9 символов могут быть от 1 до 4 раз

  //email маска
  $(selector).inputmask({
    mask: "*{1,20}@*{1,20}",
    greedy: false,
    onBeforePaste: function (pastedValue, opts) {
      pastedValue = pastedValue.toLowerCase();
      return pastedValue.replace("mailto:", "");
    },
    definitions: {
      '*': {
        validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
        cardinality: 1,
        casing: "lower"
      }
    }
  });
});

Генератор маски

Синтаксис подобен OR элементу. Маска может быть 1 из 2 вариантов, указанных в генераторе.

Для того, чтобы определить генератор, используйте |.например: «a|9» => a или 9 «(aaa)|(999)» => aaa или 999

Кроме того, убедитесь, что прочитали о возможностях keepStatic опции.

$("selector").inputmask("(99.9)|(X)", {
  definitions: {
    "X": {
      validator: "",
      cardinality: 1,
      casing: "upper"
    }
  }
});

или

$("selector").inputmask({
  mask: "99.9", "X",
  definitions: {
    "X": {
      validator: "",
      cardinality: 1,
      casing: "upper"
    }
  }
});

Предварительная обработка маски

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

$(selector).inputmask({ mask: function () { /* do stuff */ return "AAA-999", "999-AAA"; }});

JIT Masking

Маска в реальном времени. С помощью опции JIT маски можно включить JIT маску. Маска будет видна для пользователя, только при вводе символов.
По умолчанию: false

Значение может быть true или начальное число или false.

Inputmask("date", { jitMasking: true }).mask(selector);