Npm

Поле ввода

Проконсультироватьсясо специалистом 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С:Предприятие. Не используется в модуле внешнего соединения.

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

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

Usage:

Include the js-files which you can find in the dist-folder. You have the bundled file which contains the main plugin code and also all extensions (date, numerics, other) or if you prefer to only include some parts, use the separate js-files in the dist/min folder.

If you use a module loader like requireJS, use the js-files in dist/inputmask

The minimum to include is inputmask.js && jquery.inputmask.js

<script src="jquery.js" type="text/javascript"></script>
<script src="inputmask.js" type="text/javascript"></script>
<script src="jquery.inputmask.js" type="text/javascript"></script>

Define your masks:

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

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

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

Allowed HTML-elements

• input type=»text»
• input type=»tel»
• div contenteditable=»true» (and all others supported by contenteditable)
• any html-element (mask text content or set maskedvalue with jQuery.val)

Default masking definitions

• 9 : numeric
• a : alphabetical

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

Define custom definitions

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

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

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.

Options of the 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

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

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

definitionSymbol

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': {  //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" //this allows shifting values from other definitions, with the same masksymbol or definitionSymbol
  },
  '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

Defaults can be set as below.

Inputmask.extendDefaults({
  'autoUnmask': true
});
Inputmask.extendDefinitions({
  'A': {
    validator: "",
    cardinality: 1,
    casing: "upper" //auto uppercasing
  },
  '+': {
    validator: "",
    cardinality: 1,
    casing: "upper"
  }
});
Inputmask.extendAliases({
  'Regex': {
    mask: "r",
    greedy: false,
    ...
  }
});

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

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

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: '',
    allowPlus: false,
    allowMinus: false
  }
});

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({
  onKeyValidation: function(key, result){
    if (!result){
      alert('Your input is not valid')
    }
  }
});

Usage

Importing and creating an instance:

var InputMask = require('inputmask-core')

var mask = new InputMask({pattern: '11/11/1111'})

Examples of editing a mask:

/*  Invalid input is rejected */
mask.input('a')
// → false

/* Valid input is accepted */
mask.input('1')
// → true
mask.getValue()
// → '1_/__/____'

/* Editing operations update the cursor position */
mask.selection
// → {start: 1, end: 1}

/* Pasting is supported */
mask.paste('2345678')
// → true
mask.getValue()
// → '12/34/5678'

/* Backspacing is supported */
mask.backspace()
// → true
mask.getValue()
// → '12/34/567_'

/* Editing operations also know how to deal with selected ranges */
mask.selection = {start: , end: 9}
mask.backspace()
// → true
mask.getValue()
// → '__/__/____'

/* Undo is supported */
mask.undo()
// → true
mask.getValue()
// → '12/34/567_'
mask.selection
// → {start: 0, end: 9}

/* Redo is supported */
mask.redo()
mask.getValue()
// → '__/__/____'
mask.selection
// → {start: 0, end: 0}

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

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

валидатор(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('Ваше введенное значение не верно')
    }
  }
});

Initialization

ES2015 (Webpack/Rollup/Browserify/etc)

import Vue from 'vue'

// As a plugin
import VueMask from 'v-mask'
Vue.use(VueMask);

// Or as a directive
import { VueMaskDirective } from 'v-mask'
Vue.directive('mask', VueMaskDirective);

// Or only as a filter
import { VueMaskFilter } from 'v-mask'
Vue.filter('VMask', VueMaskFilter)

UMD (Browser)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
// As a plugin
Vue.use(VueMask.VueMaskPlugin);

// Or as a directive
Vue.directive('mask', VueMask.VueMaskDirective);
</script>

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

Methods:

Create a mask for the input.

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

or

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

or

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

or

var im =newInputmask("99-999-99");im.mask(document.querySelectorAll(selector));

or

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

Get the

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

or

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

Unmask a given value against the mask.

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

Remove the .

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

or

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

or

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

return the default (empty) mask value

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

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(){functionvalidateMaskedValue(val){}functionvalidateValue(val){}var val =$("#test").val();if($("#test").inputmask("hasMaskedValue"))validateMaskedValue(val);elsevalidateValue(val);});

Verify whether the current value is complete or not.

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

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

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 where cloned an 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.

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({onBeforePastefunction(pastedValue,opts){returnphoneNumOnPaste(pastedValue, opts);}});

$("#CellPhone").inputmask("option",{onBeforePastefunction(pastedValue,opts){returnphoneNumOnPaste(pastedValue, opts);}})

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"dd/mm/yyyy"});

Validate a given value against the mask.

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

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.

Usage:

Include the js-files which you can find in the dist-folder. You have the bundled file which contains the main plugin code and also all extensions. (date, numerics, other) or if you prefer to only include some parts, use the separate js-files in the dist/min folder.

The minimum to include is the jquery.inputmask.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.inputmask.js" type="text/javascript"></script>

Define your masks:

$(document).ready(function(){
   $("#date").inputmask("d/m/y");  //direct mask
   $("#phone").inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
   $("#tin").inputmask({"mask": "99-9999999"}); //specifying options only
});

or

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

Default masking definitions

• 9 : numeric
• a : alfabetic

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

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

InputMask editing methods

Editing methods will not allow the string being edited to contain invalid values according to the mask’s pattern.

Any time an editing method results in either the or the changing, it will return .

Otherwise, if an invalid (e.g. trying to input a letter where the pattern specifies a number) or meaningless (e.g. backspacing when the cursor is at the start of the string) editing operation is attempted, it will return .

Applies a single character of input based on the current selection.

• If a text selection has been made, editable characters within the selection will be blanked out, the cursor will be moved to the start of the selection and input will proceed as below.

• If the cursor is positioned before an editable character and the input is valid, the input will be added. The cursor will then be advanced to the next editable character in the mask.

• If the cursor is positioned before a static part of the mask, the cursor will be advanced to the next editable character.

After input has been added, the cursor will be advanced to the next editable character position.

Performs a backspace operation based on the current selection.

• If a text selection has been made, editable characters within the selection will be blanked out and the cursor will be placed at the start of the selection.

• If the cursor is positioned after an editable character, that character will be blanked out and the cursor will be placed before it.

• If the cursor is positioned after a static part of the mask, the cursor will be placed before it.

Applies a string of input based on the current selection.

This behaves the same as — and is effectively like — calling for each character in the given string with one key difference — if any character within the input is determined to be invalid, the entire paste operation fails and the mask’s value and selection are unaffected.

Pasted input may optionally contain static parts of the mask’s pattern.

Define custom definitions

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

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

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.

Options of the command object

• pos : position to insert
• c : character to insert
• caret : position of the caret
• remove : position to remove
• refreshFromBuffer :
  • true => refresh validPositions from the complete buffer
  • { start: , end: } => refresh from start to end

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

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

definitionSymbol

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)

$.extend($.inputmask.defaults.definitions, {
    '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" //this allows shifting values from other definitions, with the same masksymbol or definitionSymbol
     },
     '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"
      }
});

Specify a placeholder for a definition.

$.extend($.inputmask.defaults, {
    'autoUnmask': true
});

numeric extensions

$(document).ready(function(){
   $(selector).inputmask("decimal");
   $(selector).inputmask("decimal", { allowMinus: false });
   $(selector).inputmask("integer");
});

Define the radixpoint

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

Define the number of digits after the radixpoint

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

When TAB out of the input the digits autocomplate with 0 if the digits option is given a valid number.

Grouping support through: autoGroup, groupSeparator, groupSize

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

Allow minus and/or plus symbol

$(document).ready(function(){
   $(selector).inputmask("decimal", { allowMinus: false });
   $(selector).inputmask("integer", { allowMinus: false, allowPlus: true });
});