Корректная маска номера телефона inputmask (5.x)

Содержание:

Supported markup options
- data-inputmask attribute
- data-inputmask-<option> attribute
General
- set a value and apply mask
- auto-casing inputmask
Masking types
Usage:
- Allowed HTML-elements
- Default masking definitions
Поле ввода
- - Проконсультироватьсясо специалистом 1С
Маски ввода в access примеры
- - - Свойство Маска ввода
    - Свойство Формат
Supported markup options
How to use it:
Alias definitions
- date aliases
- numeric aliases
Methods:
General
Методы:
Общие сведения о масках ввода
- Три компонента маски ввода

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

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

Static masks

Почта yahoo.com: регистрация аккаунта без номера телефона

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

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

Optional masks

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

Example:

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

This mask will 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)

skipOptionalPartCharacter

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 .

Optional masks with greedy false

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", greedy: false });

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

Dynamic masks

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

{n} => n repeats
{n|j} => n repeats, with j jitmasking
{n,m} => from n to m repeats
{n,m|j} => from n to m repeats, with j jitmasking

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

$(document).ready(function(){
  $(selector).inputmask("aa-9{4}");  //static mask with dynamic syntax
  $(selector).inputmask("aa-9{1,4}");  //dynamic mask ~ the 9 def can be occur 1 to 4 times

  //email mask
  $(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!#$%&'*+/=?^_`{|}~\-]",
        casing: "lower"
      }
    }
  });
  //decimal mask
   Inputmask("(.999){+|1},00", {
        positionCaretOnClick: "radixFocus",
        radixPoint: ",",
        _radixDance: true,
        numericInput: true,
        placeholder: "0",
        definitions: {
            "0": {
                validator: ""
            }
        }
   }).mask(selector);
});

Alternator masks

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

Also make sure to read about the option.

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

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

Preprocessing masks

You can define the mask as a function that can allow you 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({ mask: function () { /* do stuff */ return "AAA-999", "999-AAA"; }});

JIT Masking

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("datetime", { jitMasking: true }).mask(selector);

Usage:

Регистрация вконтакте без номера телефона

Include the js-files which you can find in the folder.

via Inputmask class

<script src="jquery.js"></script>
<script src="inputmask.js"></script>
<script src="inputmask.???.Extensions.js"></script>

var selector = document.getElementById("selector");

var im = new Inputmask("99-9999999");
im.mask(selector);

Inputmask({"mask": "(999) 999-9999", .... other options .....}).mask(selector);
Inputmask("9-a{1,3}9{1,3}").mask(selector);
Inputmask("9", { repeat: 10 }).mask(selector);

via jquery plugin

<script src="jquery.js"></script>
<script src="inputmask.js"></script>
<script src="inputmask.???.Extensions.js"></script>
<script src="jquery.inputmask.js"></script>

or with the bundled version

<script src="jquery.js"></script>
<script src="jquery.inputmask.bundle.js"></script>

$(document).ready(function(){
  $(selector).inputmask("99-9999999");  //static mask
  $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
  $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});

via data-inputmask attribute

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

$(document).ready(function(){
  $(":input").inputmask();
  or
  Inputmask().mask(document.querySelectorAll("input"));
});

Any option can also be passed through the use of a data attribute. Use data-inputmask-<the name of the option>=»value»

<input id="example1" data-inputmask-clearmaskonlostfocus="false" />
<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:(?:*)?\.)+(?:*)?" />

$(document).ready(function(){
  $("#example1").inputmask("99-9999999");
  $("#example2").inputmask("Regex");
});

If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- … attributes you may also want to include the inputmask.binding.js

...
<script src="inputmask.binding.js"></script>
...

If you use a module loader like requireJS

Add in your config.js

paths: {
  ...
  "inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib.jquery",
  "inputmask": "../dist/inputmask/inputmask",
  ...
}

As dependencyLib you can choose between the supported libraries.

inputmask.dependencyLib (vanilla)
inputmask.dependencyLib.jquery
inputmask.dependencyLib.jqlite
…. (others are welcome)

Allowed HTML-elements

(and all others supported by contenteditable)
any html-element (mask text content or set maskedvalue with jQuery.val)

Default masking definitions

: numeric
: alphabetical
: alphanumeric

There are more definitions defined within the extensions.You can find info within the js-files or by further exploring the options.

Поле ввода

Проконсультироватьсясо специалистом 1С

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

Для 1с поле ввода маска доступны следующие форматы ограничители. Ввод только числовых данных: * 9 – вводятся только цифры * # – вводятся цифры и знаки «+» «-» и пробел * h ввод шестеричных цифр

Ввод цифр и букв: * @ – ввод символов алфавита, и при этом они будут преобразованы в верхний регистр * N – разрешен ввод алфавитных символов но уже можно контролировать регистр. * U – вводи символов алфавита с преобразованием в верхней регистр. Отличие между U и @ не смог найти. * ! – любой введенный символ автоматический преобразуется к верхнему регистру * X – разрешен ввод только латиницы

Для запрет ввода символа «^» в 1с поле ввода, необходимо прописать этот символ в маску

В маске могут присутствовать специальные символы «.» , «(», «)», «-» и «,» и некоторые другие, они позволяют форматировать строку.

Например, нам нужно указать, что номер вводится с указанием кода города. То нужно прописать 1с маску ввода «9 (999) 999 99 99» или «9 (999) 999-99-99». Все зависит от требуемого формата представления строки. Или допустим нам нужно ввести формат дополнительного номера накладной типа «код подразделение.месяц.год», тогда маска будет «UUUU.99.9999» или «UUUU/99/9999»

Стоит помнить что, задавая маску – мы обязаны задать её полностью такой длины, какой длины вводится строка. Либо если существуют несколько форматов строки, короткий и длинный – то можно задать две и более масок, через запятую.

Например, вводим сотовый телефон клиента, либо городской (без указания кода города), тогда 1c маска будет 9 (999) 999-99-99;999-99-99

Из справки 1С: ПолеВвода (TextBox) — Маска (Mask) Использование: Чтение и запись. Описание: Тип: Строка. Содержит посимвольную строку маски интерактивного ввода текста в поле. В строке маски допустимо использование следующих специальных символов: ! — любой введенный символ преобразуется в верхний регистр; 9 — допустимо ввести произвольный символ цифры; # — допустимо ввести произвольный символ цифры или — (знак минус) или + (знак плюс) или пробел; N — допустимо ввести любые алфавитно-цифровые символы (буквы или цифры); U — допустимо ввести любые алфавитно-цифровые символы (буквы или цифры) и любой введенный символ преобразуется в верхний регистр; X (латинского алфавита) — допустимо ввести произвольный символ; ^ — не допустимо вводить этот символ интерактивно пользователем, он может устанавливаться только из языка; h — допустим ввод символов обозначения шестнадцатеричных цифр; @ – допустимо ввести любые алфавитно-цифровые символы (буквы или цифры) в верхнем регистре или пробел. При помещении значения из поля ввода с маской в текстовый реквизит, связанный с этим полем ввода, происходит следующее преобразование: на тех позициях, где в маске стоит символ «@», а в строке пробел – пробел удаляется. Если в маске из специальных символов используются только символы «@», то все символы текста, соответствующие символам маски, не являющимся специальными символами, удаляются после по-следнего непустого блока из символов «@». Например, при маске «@@.@@.@@.» текст «41. 2. .» преобразуется в «41.2». Для того, чтобы использовать в маске один из специальных символов, нужно использовать перед ним символ «». Допускается указание нескольких масок в одном параметре. Маски разделяются символом «;». В этом случае использоваться будет та маска, к которой подходит введенный текст. Недоступно на сервере 1С:Предприятие. Не используется в модуле внешнего соединения.

Маски ввода в 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). Кстати, это еще одно отличие свойства Формат от свойства Маска ввода: его установки влияют на все содержимое поля, независимо от времени его (содержимого) ввода.

Supported markup options

<inputid="test"dir="rtl" />

<inputid="test"readonly="readonly" />

<inputid="test"disabled="disabled" />

<inputid="test"maxlength="4" />

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

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

All options can also be passed through data-attributes.

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

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

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

Alias definitions

date aliases

$(document).ready(function(){
   $("#date").inputmask("dd/mm/yyyy");
   $("#date").inputmask("mm/dd/yyyy");
   $("#date").inputmask("date"); // alias for dd/mm/yyyy
});

The date aliases take leapyears into account. There is also autocompletion on day, month, year.
For example:

input: 2/2/2012 result: 02/02/2012
input: 352012 result: 03/05/2012
input: 3530 result: 03/05/2030
input: rightarrow result: the date from today

numeric aliases

$(document).ready(function(){
   $("#numeric").inputmask("decimal");
   $("#numeric").inputmask("non-negative-decimal");
   $("#numeric").inputmask("integer");
});

There is autocompletion on tab with decimal numbers.

Define the radixpoint

$(document).ready(function(){
   $("#numeric").inputmask("decimal", { radixPoint: "," });
});

Define the number of digits after the radixpoint

$(document).ready(function(){
   $("#numeric").inputmask("decimal", { digits: 3 });
});

Grouping support through: autoGroup, groupSeparator, groupSize

$(document).ready(function(){
   $("#numeric").inputmask("decimal", { radixPoint: ",", autoGroup: true, groupSeparator: ".", groupSize: 3 });
});

Methods:

mask(elems)

Create a mask for the input.

$(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 unformattedMask = Inputmask.unmask("123-45678-90", { mask: "999-99999-99" }); //1234567890
var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "datetime", inputFormat: "dd/mm/yyyy", outputFormat: "ddmmyyyy"});//23031973

remove

Remove the .

$(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

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

isComplete

Verify whether the current value is complete or not.

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

getmetadata

The metadata of the actual mask provided in the mask definitions can be obtained by calling getmetadata. If only a mask is provided the mask definition will be returned by the getmetadata.

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

setvalue

The setvalue functionality is to set a value to the inputmask like you would do with jQuery.val,
BUT it will trigger the internal event used by the inputmask always, whatever the case.
This is particular usefull when cloning an inputmask with jQuery.clone. Cloning an inputmask is not a fully functional clone.
On the first event (mouseenter, focus, …) the inputmask can detect if it were cloned and can reactivate the masking. However when setting the value with jQuery.val there is none of the events triggered in that case. The setvalue functionality does this for you.

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

format

Instead of masking an input element, it is also possible to use the inputmask for formatting given values. Think of formatting values to show in jqGrid or on other elements then inputs.

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

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

General

set a value and apply the 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": "99/99/9999", '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)
});

escape special mask chars

If you want a mask element to appear as a static element you can escape them by \

$(document).ready(function(){
  $("#months").inputmask("m \\months");
});

Extra example see https://github.com/RobinHerbots/Inputmask/issues/2251

auto-casing inputmask

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

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

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

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

Методы:

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

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

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

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

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

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

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

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

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

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

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

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

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