Npm

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

Overview

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:

• a — Represents an alpha character (A-Z,a-z)
• 9 — Represents a numeric character (0-9)
• * — Represents an alphanumeric character (A-Z,a-z,0-9)

Usage

First, include the jQuery and masked input javascript files.

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

Next, call the mask function for those items you wish to have masked.

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Optionally, if you are not satisfied with the underscore (‘_’) character as a placeholder, you may pass an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
});

Optionally, if you would like to disable the automatic discarding of the uncomplete input, you may pass an optional argument to the maskedinput method

jQuery(function($){
   $("#product").mask("99/99/9999",{autoclear: false});
});

You can now supply your own mask definitions.

jQuery(function($){
   $.mask.definitions='';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

You can have part of your mask be optional. Anything listed after ‘?’ within the mask is considered optional user input. The common example for this is phone number + optional extension.

jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
});

If your requirements aren’t met by the predefined placeholders, you can always add your own. For example, maybe you need a mask to only allow hexadecimal characters. You can add your own definition for a placeholder, say ‘h’, like so: Then you can use that to mask for something like css colors in hex with a .

jQuery(function($){
   $("#phone").mask("#hhhhhh");
});

By design, this plugin will reject input which doesn’t complete the mask. You can bypass this by using a ‘?’ character at the position where you would like to consider input optional. For example, a mask of «(999) 999-9999? x99999» would require only the first 10 digits of a phone number with extension being optional.

Masking types

Static masks

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

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

Optional masks

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

Example:

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

This mask wil allow input like (99) 99999-9999 or (99) 9999-9999.Input => 12123451234 mask => (12) 12345-1234 (trigger complete)Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)

skipOptionalPartCharacter

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

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

Dynamic masks

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

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

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

$(document).ready(function(){
   $(selector).inputmask("aa-9{4}");  //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!#$%&'*+/=?^_`{|}~\-]",
                    cardinality: 1,
                    casing: "lower"
                }
            }
    });

Alternator masks

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

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

Also make sure to read about the keepStatic option.

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

or

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

Preprocessing masks

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

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

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

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

Условие на значение, приведенное в таблице ниже, гарантирует, что адрес электронной почты будет состоять из одного или нескольких знаков, знака «@», еще одного или нескольких знаков, точки и еще одного или нескольких знаков. Например, адрес proverka@example.com будет правильным, а proverka@example,com или proverka@example — нет. Если ввести адрес электронной почты, не соответствующий условию на значение, введенные данные будут отклонены и появится сообщение, указанное в свойстве Сообщение об ошибке. Если свойство Сообщение об ошибке не задано, будет выведено стандартное сообщение.

Is Null Or ((Like «*?@?*.?*») And (Not Like «**»))

Сообщение об ошибке (необязательно)

Введите адрес электронной почты со знаком «@» и полным именем домена (пример: frank@contoso.com).

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

⚙️ Configuration

Library provides several ways to apply the mask.

The first and the easiest one is to use default placeholders.

Default placeholders

This approach is good for simple cases. No configuration is required.

import Vue from 'vue'
import VueMask from 'v-mask'
Vue.use(VueMask)

<template>
  <input type="text" v-mask="'####-##'" v-model="myInputModel">
</template>
<script>
  export default {
    data () => ({
      myInputModel ''
    })
  }
</script>

Entering in the input field will produce value in variable.

Here is a list placeholders you can utilize by default:

Placeholder	Format
#	Number (0-9)
A	Letter in any case (a-z,A-Z)
N	Number or letter (a-z,A-Z,0-9)
X	Any symbol
?	Optional (next character)

Custom placeholders

While default placeholders are easy to use and straightforward in reality we have to deal with more complex cases where validation can be a bit more complex and unpredictable. In such cases it makes sense to define custom placeholders specific to the project or the domain.

To define them you should pass them as an object while installing plugin. Where:

• is the character in a mask
• is regular expression used to verify entered symbol

You can disable any default placeholder by passing placeholder as a key and as a value.

Any valid string character can be used as a placeholder (e.g. Cyrillic or Arabic)

import Vue from 'vue'
import VueMask from 'v-mask'

Vue.use(VueMask, {
  placeholders: {
    '#': null,       // passing `null` removes default placeholder, so `#` is treated as character
    D: /\d/,         // define new placeholder
    Я: /\wа-яА-Я/, // cyrillic letter as a placeholder
  }
})

<template>
  <input type="text" v-mask="'###-DDD-###-DDD'" v-model="myInputModel">
</template>
<script>
  export default {
    data () => ({
      myInputModel ''
    })
  }
</script>

Entering in that input field will produce value in variable.

Array of RegExp

In some cases you might not want to define global placeholders either because you are dealing with unique input or you are facing conflicts for placeholders in several places.

In such cases you can supply array of per-char regular excursions or static characters to .

import Vue from 'vue'
import VueMask from 'v-mask'
Vue.use(VueMask)

<template>
  <input type="text" v-mask="mask" v-model="myInputModel">
</template>
<script>
  export default {
    data () => ({
      mask ,
      myInputModel ''
    })
  }
</script>

In this example entering in the input field will produce value in variable.

Notice: Keep in mind that library always verifies one character per regular expression. Trying verify multiple charters in the same RegExp won’t work.

Function

If custom placeholder and array of RegExps can’t fit your needs there is one more way you can use to mask a value.
The idea beneath is that you can write a function that is used by library to format the output.

This approach is super powerful but also more complex to write and understand so try previous ones first.

The function will be given a value from the input. It should return array of per-char regular expressions & static characters:

import Vue from 'vue'
import VueMask from 'v-mask'
Vue.use(VueMask)

<template>
  <input type="text" v-mask="mask" v-model="myInputModel" placeholder="00:00-23:59">
</template>
<script>
  /**
   * Generate a time mask based on input value (23:59)
   * @param {string} value
   */
  export function timeMask(value) {
    const hours = ,
      value.charAt() === '2' ?   ,
    ];
    const minutes = , ];
    return value.length > 2
      ? 
       hours;
  }

  /**
   * Generate a time range mask based on input value (00:00-23:59)
   * @param {string} value
   */
  export function timeRangeMask(value) {
    const numbers = value.replace(g, '');
    if (numbers.length > 4) {
      return ;
    }
    return ;
  }

  export default {
    data () => ({
      mask timeRangeMask,
      myInputModel ''
    })
  }
</script>

In this example entering in the input field will produce valid time range in variable.

Text Mask Addons

The usage is simple. Configure the addon as want and pass the result to the as you would to .

import Vue from 'vue'
import VueMask from 'v-mask'
Vue.use(VueMask)

<template>
  <input type="text" v-mask="mask" v-model="myInputModel" placeholder="$100.00">
</template>
<script>
  import createNumberMask from 'text-mask-addons/dist/createNumberMask';
  const currencyMask = createNumberMask({
    prefix '$',
    allowDecimal true,
    includeThousandsSeparator true,
    allowNegative false,
  });
  export default {
    data () => ({
      mask currencyMask,
      myInputModel ''
    })
  }
</script>

In this example:

• entering in the input field will produce in variable
• while entering in the input field will produce

View the documentation for a full list of options available.

Типы масок

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

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

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

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

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

Пример:

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

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

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

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

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

skipOptionalPartCharacter: " "

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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

или

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

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

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

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

JIT Masking

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

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

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

numeric extensions

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

RadixDance

With the decimal mask the caret will always jump to the integer part, until you type the radixpoint.
There is autocompletion on tab with decimal numbers. You can disable this behaviour by setting the skipRadixDance to true.

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

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(){
   $("#numeric").inputmask("decimal", { radixPoint: ",", autoGroup: true, groupSeparator: ".", groupSize: 3 });
});

Allow minus and/or plus symbol

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

3 ответов

AngularJS directive usage

First include the directive module:

<script src="cleave.js/dist/cleave-angular.min.js"></script>
<script src="cleave.js/dist/addons/cleave-phone.{country}.js"></script>

And in your model:

angular.module('app', 'cleave.js')

.controller('AppController', function($scope) {
    $scope.onCreditCardTypeChanged = function(type) {
        $scope.model.creditCardType = type;
    };

    $scope.model = {
        rawValue: ''
    };

    $scope.options = {
        creditCard: {
            creditCard: true,
            onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
        }
    };
});

Then easily you can apply directive to field:

<div ng-controller="AppController">
    <input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"
        cleave="options.creditCard"/>
</div>

More usage in documentation: Angular directive usage

⇡#Тестируем

Deepcool Quadstellar позволяет собрать по-настоящему производительную систему. Лично у меня получилась следующая сборка:

Конфигурация тестового стенда
CPU	Intel Core i7-8700K, 3,7 (4,7) ГГц
Материнская плата	MSI Z370 GODLIKE GAMING
Видеокарта	MSI GeForce GTX 1080 Ti GAMING X TRIO, 11 Гбайт GDDR5X
Оперативная память	DDR4-3000, 2 × 8 Гбайт
ПЗУ	Team Group T-FORCE CARDEA, 480 Гбайт, PCI Express x 4 3.0 4x Western Digital WD10EFRX, 1 Тбайт, SATA 6 Гбит/с
Блок питания	Antec HCG-750M, 750 Вт
Система охлаждения CPU	Thermaltake Floe Riing RGB 240 TT Premium Edition + вентиляторы ENERMAX UCTBRGB12-BP6
Корпус	Deepcool Quadstellar
Монитор	NEC EA244UHD
Операционная система	Windows 10 Pro x64
ПО для видеокарт
NVIDIA	GeForce Game Ready Driver 398.36
Дополнительное ПО
Удаление драйверов	Display Driver Uninstaller 17.0.6.1
Измерение FPS	Fraps 3.5.99
Action! 2.3.0
Разгон и мониторинг	GPU-Z 2.7.0
MSI Afterburner 4.5.0
Дополнительное оборудование
Тепловизор	Fluke Ti400
Шумомер	Mastech MS6708
Ваттметр	watts up? PRO

На SSD была установлена операционная система Windows 10 Pro x64. Тестирование эффективности охлаждения проводилось в двух режимах: с открытыми и закрытыми створками передней панели корпуса. Во всех случаях корпус стоял на столе в вертикальном положении. Центральный процессор в течение 30 минут нагружался при помощи программы LinX 0.7.0. Мониторинг температурных показателей выполнялся приложением HWiNFO64 5.74. Целиком система нагружалась в компьютерной игре «Ведьмак-3: Дикая охота», при максимальных настройках качества графики в разрешении Full HD, в течение двух часов. Тестирование проводилось в помещении с температурой 27,7 градуса Цельсия. Уровень шума измерялся электронным прибором Mastech MS6708 с расстояния 50 см от корпуса.

Для получения стабильных результатов все вентиляторы в системном блоке работали с фиксированной частотой: корпусные вентиляторы — ~500, ~1000, ~1175 и ~1500 об/мин; вентиляторы процессорной СО — ~1500 об/мин (100 %); вентиляторы видеокарты — ~1330 об/мин (50 %). Не было возможности контролировать вращение вентилятора только у блока питания, но справедливости ради отмечу, что PSU все время находился за заградительной перегородкой, а потому никак не влиял на тестирование.

Уровень шума, расстояние 50 см (меньше — лучше)
Режим работы вентиляторов	Закрытая передняя панель	Открытая передняя панель
Минимальная частота вращения (~500 об/мин)	35,9 дБ	36,2 дБ
Silent (~1000 об/мин)	36,4 дБ	37,4 дБ
Standard (~1175 об/мин)	37,5 дБ	39,1 дБ
Performance (~1500 об/мин)	42,2 дБ	44,6 дБ

Как уже было сказано, в приложении QuadStellar можно настроить частоту вращения всех корпусных вентиляторов, а также крыльчаток, подключенных к блоку управления. Корпус вполне можно назвать негромким. Результаты показывают, что при частоте вращения до 1175 об/мин вентиляторы TF120 работают довольно тихо. При частоте ~500 об/мин квартет TF120 работает практически бесшумно. В случае с нашей сборкой самыми громкими элементами в играх оказались блок питания и видеокарта.

Нагрев компонентов тестового стенда (меньше — лучше)
Режим работы вентиляторов	Закрытая передняя панель	Открытая передняя панель
LinX, Core Max, °C
Минимальная частота вращения (~500 об/мин)	82	82
Silent (~1000 об/мин)	82	82
Standard (~1175 об/мин)	81	82
Performance (~1500 об/мин)	80	80
«Ведьмак-3: Дикая охота», Core Max, °C
Минимальная частота вращения (~500 об/мин)	64	61
Silent (~1000 об/мин)	62	58
Standard (~1175 об/мин)	61	59
Performance (~1500 об/мин)	58	56
«Ведьмак-3: Дикая охота», GPU, °C
Минимальная частота вращения (~500 об/мин)	84 (минимальная частота GPU — 1709 МГц)	84 (минимальная частота GPU — 1709 МГц)
Silent (~1000 об/мин)	84 (минимальная частота GPU — 1759 МГц)	84 (минимальная частота GPU — 1835 МГц)
Standard (~1175 об/мин)	84 (минимальная частота GPU — 1835 МГц)	84 (минимальная частота GPU — 1860 МГц)
Performance (~1500 об/мин)	84 (минимальная частота GPU — 1848 МГц)	84 (минимальная частота GPU — 1936 МГц)

После установки необслуживаемой СВО пришлось убрать один из корпусных вентиляторов, работающих на вдув. Поэтому секция Deepcool Quadstellar, в которую помещена материнская плата, никак дополнительно не обдувается. Неудивительно, что при открытии/закрытии «лепестков» на передней панели, а также изменении частоты вращения корпусных вентиляторов температура самого горячего ядра Core i7-8700K практически не менялась.

В играх температура центрального процессора оказалась заметно ниже. Температура процессора видеокарты при заданных условиях частоты вращения вентиляторов всегда достигала отметки в 84 градуса Цельсия, а затем частота GPU постепенно снижалась. На мой взгляд, Deepcool Quadstellar работает достаточно эффективно с точки зрения охлаждения в режиме Standard. Открытие пластиковых шторок на передней панели действительно помогает корпусным вентиляторам функционировать эффективнее.

В моем случае — случае использования четырех жестких дисков Western Digital WD10EFRX — мне никак не удалось добиться высоких температур при постоянной нагрузке в виде последовательных операций с глубиной очереди запросов в 32 команды. Даже при минимальной активности корпусных вентиляторов максимальная температура самого горячего жесткого диска составила всего 40 градусов Цельсия. При работе вентиляторов в режиме Performance этот показатель снизился на 5 градусов Цельсия.

Воспользоваться Intercepter-NG

Неплохой способ вспомнить пароль – прибегнуть к помощи особой утилиты Intercepter-NG. Несмотря на то, что она скорее предназначена для хакеров, можно её преимущества использовать для решения этой проблемы.

После входа в любой аккаунт или программу, как только произойдёт автоматическая авторизация, Intercepter-NG сделает своё дело – обнаружит сведения для входа и зафиксирует информацию в отдельном текстовом файле. Останется открыть этот отчёт и увидеть логин с паролем для входа на конкретный сайт или в приложение. Надо добавить, что корректная работа этой программы возможна только на смартфонах с включёнными рут правами.

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

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

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

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

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

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

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

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

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

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

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

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

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

Выполнить функцию после завершения ввода

Плагин также может выполнить функцию после завершения ввода:

$("#phone").mask("+7 (999) 999 - 9999",{completed:function(){alert("ОК!");}});

Маска ввода в полях формы на jQuery

Оригинал статьи Маска ввода в полях формы на jQuery

Masked input — очередной плагин предназначенный для всеми горячо любимого javascript фремворка jQuery, он позволяет облегчить жизнь вам и вашим пользователям, тем что с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п.

Плагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.

И так, что же нужно сделать для того, что бы начать использовать данный плагин на своем сайте? Для начала подключите javascript файлы jQuery и плагина к вашей странице, выглядеть это будет примерно так:

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

Далее нужно вызвать функцию плагина для всех элементов формы для которых надо создать маску, и передать в нее необходимые параметры:

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Функция плагина принимает 2 параметра первый — сама маска для ввода, второй — объект дополнительных параметров. Маска ввода представляет из себя строку состоящую из спец символов:

a — трактуется как буквенный символ из диапазона (A-Z,a-z)
9 — трактуется как числовой символ (0-9)
* — трактуется как алфавитно цифровой символ (A-Z,a-z,0-9)

Все символы кроме перечисленных выше трактуются как литералы.

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

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Так же в качестве дополнительного параметра можно указать функцию обратного вызова, которая будет вызвана после того как все элементы маски будут заполнены, например:

jQuery(function($){
   $("#product").mask("99/99/9999",{completed : function(){
       alert("Вы ввели: "+this.val());}
   });
});
Вы мож

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

jQuery(function($){
   $.mask.definitions='';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Иногда бывают такие ситуации, что возникает потребность не заполнять пользователем некоторую часть маски ввода, для этого вы можете использовать спецсимвол ? — все что идет после этого символа является не обязательным для ввода с стороны пользователя, например:

jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
});

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