Управление форматами ввода данных с помощью масок ввода

Define custom definitions

You can define your own definitions to use in your mask.Start by choosing a masksymbol.

Next define your validator. The validator can be a regular expression or a function.

The return value of a validator can be true, false or a command object.

• pos : position to insert

• c : character to insert

• caret : position of the caret

• remove : position(s) to remove

  pos or

• insert : position(s) to add :

  • { pos : position to insert, c : character to insert }

• refreshFromBuffer :

  • true => refresh validPositions from the complete buffer
  • { start: , end: } => refresh from start to end

Cardinality specifies how many characters are represented and validated for the definition.

The prevalidator option is used to validate the characters before the definition cardinality is reached. (see ‘j’ example)

When you insert or delete characters, they are only shifted when the definition type is the same. This behavior can be overridden by giving a definitionSymbol. (see example x, y, z, which can be used for ip-address masking, the validation is different, but it is allowed to shift the characters between the definitions)

Inputmask.extendDefinitions({'f'{"validator""[0-9\(\)\.\+/ ]","cardinality"1,'prevalidator'null},'g'{"validator"function(chrs,buffer,pos,strict,opts){}"cardinality"1,'prevalidator'null},'j'{    validator"(19|20)\\d{2}",    cardinality4,    prevalidator{ validator"", cardinality1},{ validator"(19|20)", cardinality2},{ validator"(19|20)\\d", cardinality3}},'x'{    validator"",    cardinality1,    definitionSymbol"i"},'y'{validatorfunction(chrs,buffer,pos,strict,opts){var valExp2 =newRegExp("2|");returnvalExp2.test(bufferpos -1+ chrs);},    cardinality1,    definitionSymbol"i"},'z'{validatorfunction(chrs,buffer,pos,strict,opts){var valExp3 =newRegExp("25|2|");returnvalExp3.test(bufferpos -2+ bufferpos -1+ chrs);},    cardinality1,    definitionSymbol"i"}});

Specify a placeholder for a definition.

Defaults can be set as below.

Inputmask.extendDefaults({'autoUnmask'true});Inputmask.extendDefinitions({'A'{    validator"[A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5",    cardinality1,    casing"upper"},'+'{    validator"[0-9A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5",    cardinality1,    casing"upper"}});Inputmask.extendAliases({'Regex'{    mask"r",    greedyfalse,...}});

But if the property is defined within an alias you need to set it for the alias definition.

Inputmask.extendAliases({'numeric'{    allowPlusfalse,    allowMinusfalse}});

However, the preferred way to alter properties for an alias is by creating a new alias which inherits from the default alias definition.

Inputmask.extendAliases({'myNum'{    alias"numeric",    placeholder'',    allowPlusfalse,    allowMinusfalse}});

Once defined, you can call the alias by:

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

All callbacks are implemented as options. This means that you can set general implementations for the callbacks by setting a default.

Inputmask.extendDefaults({onKeyValidationfunction(key,result){if(!result){alert('Your input is not valid')}}});

Определение пользовательского символа маски

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

валидатор(chrs, maskset, pos, strict, opts)

Затем определите свой валидатор. Проверка может быть регулярным выражением или функцией.

Возвращаемое значение валидатор может быть истинным, ложным или объектом.

Опциональные команды

• pos : позиция для вставки

• c : символ для вставки

• caret : позиция каретки

• remove : позиция (позиции) для удаления

  pos или

• insert : позиции (позиций) для добавления :

  • { pos : позиция вставки, c : символ для вставки }

• refreshFromBuffer :

  • true => refresh validPositions from the complete buffer
  • { start: , end: } => refresh from start to end

prevalidator(chrs, maskset, pos, strict, opts)

Опция предварительной проверки используется для проверки символов перед кардинальным определением, которое будет достигнуто. (См ‘J’ пример)

definitionSymbol

При вставке или удалении символов, они смещаются только тогда, когда определение типа является то же самое. Такое поведение может быть отменено, давая definitionSymbol. (См пример х, у, z, который может быть использован для IP-адреса маски, проверка отличается, но допускается сдвиг символов между определениями)

Inputmask.extendDefinitions({
  'f': {  //masksymbol
    "validator": "[0-9\(\)\.\+/ ]",
    "cardinality": 1,
    'prevalidator': null
  },
  'g': {
    "validator": function (chrs, buffer, pos, strict, opts) {
      //do some logic and return true, false, or { "pos": new position, "c": character to place }
    }
    "cardinality": 1,
    'prevalidator': null
  },
  'j': { //basic year
    validator: "(19|20)\\d{2}",
    cardinality: 4,
    prevalidator: 
      { validator: "", cardinality: 1 },
      { validator: "(19|20)", cardinality: 2 },
      { validator: "(19|20)\\d", cardinality: 3 }
    
  },
  'x': {
    validator: "",
    cardinality: 1,
    definitionSymbol: "i" //это позволяет сдвига значениt из других определений, с тем же символом маски или определения символа
  },
  'y': {
    validator: function (chrs, buffer, pos, strict, opts) {
      var valExp2 = new RegExp("2|");
      return valExp2.test(bufferpos - 1 + chrs);
    },
    cardinality: 1,
    definitionSymbol: "i"
  },
  'z': {
    validator: function (chrs, buffer, pos, strict, opts) {
      var valExp3 = new RegExp("25|2|");
      return valExp3.test(bufferpos - 2 + bufferpos - 1 + chrs);
    },
    cardinality: 1,
    definitionSymbol: "i"
  }
});

set defaults

Значения по умолчанию могут быть установлены, как показано ниже.

Inputmask.extendDefaults({
  'autoUnmask': true
});
Inputmask.extendDefinitions({
  'A': {
    validator: "",
    cardinality: 1,
    casing: "upper" //автоматический перевод в верхний регистр
  },
  '+': {
    validator: "",
    cardinality: 1,
    casing: "upper"
  }
});
Inputmask.extendAliases({
  'Regex': {
    mask: "r",
    greedy: false,
    ...
  }
});

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

Inputmask.extendAliases({
  'numeric': {
    allowPlus: false,
    allowMinus: false
  }
});

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

Inputmask.extendAliases({
  'myNum': {
    alias: "numeric",
    placeholder: '',
    allowPlus: false,
    allowMinus: false
  }
});

После того, как определено, вы можете вызвать псевдоним с помощью:

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

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

Inputmask.extendDefaults({
  onKeyValidation: function(key, result){
    if (!result){
      alert('Ваше введенное значение не верно')
    }
  }
});

Маски ввода в access примеры

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

Свойство Маска ввода

Если щелкнуть в ее пределах (см. рис. 3.10), можно будет вводить значения вручную. Вначале введем значение 0L → L в строку Маска ввода. Начиная со следующей вводимой записи и до тех пор, пока маска ввода не будет снова изменена, коды стран будут задаваться в том виде, который показан на рис. 3.11 для кодов Индии и Пакистана. Это происходит в соответствии с правилами настройки форматов, приведенными выше (раздел «Свойства полей»). (Мы не обсуждаем сейчас вопрос о смысле такой установки, а просто рассматриваем возможности маски ввода.)

Правда, при переходе из режима конструктора в режим просмотра таблицы (см. рис. 3.10 и 3.11) Access 2002 может предупредить пользователя о возможных опасностях, выдав информацию о том, что условия целостности данных изменены и информация может противоречить новым условиям, предложив при этом проверить существующие данные в новых условиях. Если подобное предложение поступит, то с ним имеет смысл согласиться и ответить Да. Для выбора значений маски ввода может также использоваться мастер маски ввода. Если вы захотите воспользоваться его помощью и щелкнете по кнопке

После того как вы согласитесь с этим предложением (в случае несогласия вы никуда не продвинетесь), появится окно мастера маски ввода (см. рис. 3.12). Открывшееся окно предлагает вам выбрать Маску ввода в соответствии с заданным свойством Формат данных. Чтобы проверить работу маски ввода, можете ввести данные в поле Проба. Значения свойства Маска ввода для ввода вручную рассматривались выше. Здесь мы перечислим шаблоны для случая их задания мастером: • Общий формат даты; • Длинный формат даты; • Средний формат даты; • Короткий формат даты; • Длинный формат времени; • Средний формат времени; • Короткий формат времени. Чтобы изменить маску ввода, щелкните по кнопке Список. Теперь выберите в открывшемся поле какую-либо позицию, например Средний формат времени (рис. 3.12). Затем, щелкнув по кнопке Далее, вы перейдете в следующее окно мастера масок (см. рис. 3.14).

В этом окне вы также можете изменить шаблон. Это можно сделать в поле Маска ввода, которое в этом случае активизируется. Далее в том же окне мастера масок вы можете изменить вид заполнителей или меток. Эти метки заполняют пробелы между значащими символами. Выбор нужной метки из списка производится в поле Вид заполнителя с помощью стрелки прокрутки. Указанные вами метки вводятся автоматически по мере набора символов. Использовав все возможности коррекции масок, которыми располагает мастер, вы получите не менее разнообразные и экзотические маски, чем те, что пользователь создает вручную. Проверить, как введены данные, можно, указав их в поле проверки Проба и затем нажав клавишу Enter. После этого, если не последует возражений со стороны мастера, щелкните по кнопке Далее. В следующем окне (см. рис. 3.15) мастер масок предоставит вам еще одну возможность изменить маску для данного шаблона, задав ее значение и вид заполнителя.

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

Когда вы дадите тот или иной ответ, щелкните по кнопке Готово, и маска будет сформирована. Если на этой стадии работы вы выберете опцию Далее, то сначала появится еще одно окно. В нем мастер масок сообщит вам, что теперь у него есть все необходимое для создания маски. На рис. 3.17 и 3.18 мы видим, как выглядит изменение маски ввода в окне конструктора и в окончательном виде в таблице Страны.

В нашем примере сформированная мастером маска будет работать с момента ее установки и до следующей корректировки. Все это время Access 2002 будет допускать ввод только тех записей, у которых код страны имеет четыре разряда. На рис. 3.18 показаны записи, введенные согласно заданным условиям.

Сравнивая два способа формирования маски ввода (вручную и с помощью мастера масок), мы пришли к заключению, что первый путь значительно проще, и поэтому именно он рекомендован пользователю.

Свойство Формат

Если теперь мы включим режим просмотра таблицы, которая была показана на рис. 3.18, то увидим что все строки в поле Страна заполнены прописными буквами (см. рис. 3.20). Кстати, это еще одно отличие свойства Формат от свойства Маска ввода: его установки влияют на все содержимое поля, независимо от времени его (содержимого) ввода.

InputMask options

A masking pattern must be provided and must contain at least one editable character, or an will be thrown.

The following format characters define editable parts of the mask:

• — number
• — letter
• — letter, forced to upper case when entered
• — alphanumeric
• — alphanumeric, forced to upper case when entered

If you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:

var mask = new InputMask({pattern: '\\A11 \\1AA', value: 'A99 1ZZ'})
mask.getValue()
// → 'A99 1ZZ'

If you need to include a static backslash in a pattern, you must escape it:

var mask = new InputMask({pattern: '\\\\A11\\\\', value: 'Z98'})
mask.getValue()
// → '\\Z98\\'

Otherwise, all other characters are treated as static parts of the pattern.

Example patterns

• Credit card number:
• Date:
• ISO date:
• Time:
• Canadian postal code:
• Norn Iron license plate:

An object defining additional custom format characters to use in the mask’s pattern.

When defining a new format character, a function is required and a function can optionally be defined to modify the validated character before adding it to the mask’s value.

For example this is how you would define as a new format character which accepts word character input (alphanumeric or underscore) and forces it to lower case when entered:

var mask = new InputMask({
  pattern: 'Awwwww', // An uppercase letter followed by 5 word characters
  formatCharacters: {
    'w': {
      validate: function(char) { return \w.test(char) }
      transform: function(char) { return char.toLowerCase() }
    }
  }
})

To override a built-in format character, pass its character as a property of this object along with the new definition.

To disable a built-in format character, pass its character as a property of this object with a value:

var mask = new InputMask({
  pattern: 'A1111', // Treats the 'A' as static
  formatCharacters: {
    'A': null
  }
})

The character which is used to fill in editable slots for which there is no input yet when getting the mask’s current value.

Defaults to ; must be a single character.

var mask = new InputMask({pattern: '11/11/1111', placeholderChar: ' '})
mask.input('1')
// → true
mask.getValue()
// → '1 /  /    '

An optional initial value for the mask.

An optional default selection — defaults to , placing the cursor before the first character.

An optional property that, if true, progressively shows the mask as input is entered. Defaults to

Example:
Given an input with a mask of , a value of , and set to , then the input’s value is formatted as
Given the same input but with a value of , then the input’s value is formatted as
Given the same input but with a value of , then the input’s value is formatted as

Методы:

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"});

How to use it:

1. Include the necessary JavaScript libraries on the page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.maskedinput.umd.min.js"></script>

2. Create a new MaskedInput object and set the data format as follows:

var dateMask = new MaskedInput({
    format: 'dd/MM/yyyy hh:mm tt',
    // additional patterns to recognize the format
    patterns: {}
});

3. Append the date mask to a given input.

dateMask.$el.appendTo('#date-field-cell');

4. Set the options for each field:

dateMask
  .fieldOption('hours_12', 'required', false)
  .fieldOption('minutes', 'required', false)
  .fieldOption('ampm', 'required', false)
  .resize();

5. API methods.

dateMask

// Get an internal field element by index or by name.
.field(index)

// Get/set a field's configuration option
.fieldOption(name, newValue)

// Get/set an internal field's value by index or by name.
.fieldValue(index, newValue)

// Get/set a configuration option
.option(name, newValue)

// Call if something has drastically changed and the control needs to be regenerated. 
// Only applicable when you've manually changed a field's type.
.render()

// Update the size of the field's content. 
// This can't be called when the control is not on the DOM yet. If you don't want the field to be dynamically sized, you can skip calling this.
.resize()

// A synonym for value
.val(newValue?)

// Get/set the full value
.value(newValue?)

7. PartType parameters:

/**
* @typedef {String} MaskedInput~PartType
* @name MaskedInput~PartType
* @enum {String}
*/
var PartType = {
  /** @const */ NUMBER: 'number',
  /** @const */ TEXT: 'text',
  /** @const */ LABEL: 'label'
};

8. MaskedInput Part parameters:

• type: Type of the field
• name: Name for this field
• ariaLabel: An ARIA accessibility label
• text: Text for this field if it’s a LABEL
• placeholder: Placeholder for the field
• length: Length of the field
• maxLength: Maximum length of the field
• numericMin: Minimum numeric value
• numericMax: Maximum numeric value
• wholeNumber: Force the number to be whole? (default `false`)
• validator: Validator regex or function
• options: Options to choose from for textual field
• postProcess: Function for post processing a value before retrieving by user
• padding: Enable padding in value result (default `true`)
• required: Is the field required (default `true`)
• defaultValue: Default value, used if field is not `required`
• forcePlaceholderWidth: Always consider placeholder’s width (default `true`)

9. MaskedInput Pattern parameters:

• pattern: Pattern to recognize in the format
• type: Type of the field
• name: Name for this field
• ariaLabel: An ARIA accessibility label
• text: Text for this field if it’s a LABEL
• placeholder: Placeholder for the field
• length: Length of the field
• maxLength: Maximum length of the field
• numericMin: Minimum numeric value
• numericMax: Maximum numeric value
• wholeNumber: Force the number to be whole? (default `false`)
• validator: Validator regex or function
• options: Options to choose from for textual field
• postProcess: Function for post processing a value before retrieving by user
• padding: Enable padding in value result (default `true`)
• required: Is the field required (default `true`)
• defaultValue: Default value, used if field is not `required`
• forcePlaceholderWidth: Always consider placeholder’s width (default `true`)

10. MaskedInput options:

• format: Format to show
• patterns: Additional patterns to recognize in the format

Назначение плагина masked 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» :

Создание HTML элементу input маски ввода телефона

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

Использование различных заполнителей в масках ввода masked input

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

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

Сообщение, отображаемое пользователю после того как он завершил ввод маски телефона

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

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

Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой

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

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

Например, создадим для маски специальный символ

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

Демонстрация работы маски для ввода положительного или отрицательного числа

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

Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате

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

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

Демонстрация работы маски для ввода телефона в зависимости от выбранной страны

Supported markup options

data-inputmask attribute

You can also apply an inputmask by using the data-inputmask attribute. In the attribute you specify the options wanted for the inputmask. This gets parsed with $.parseJSON (for the moment), so be sure to use a well-formed json-string without the {}.

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />

$(document).ready(function(){
  $(":input").inputmask();
});

data-inputmask-<option> attribute

All options can also be passed through data-attributes.

<input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" />

$(document).ready(function(){
  $(":input").inputmask();
});