Npm

Содержание:

Usage:
Маска ввода полю в форме в Excel
Способ второй: переводим проценты в десятичную дробь
Define custom definitions
Supported markup options
Functions
AngularJS directive usage
3 ответов
Методы:
Overview
Overview
- Usage
Применение:
- Разрешенные HTML-элементы
- Символы для маски по умолчанию
Использование масок ввода для адресов электронной почты

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

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

Маска ввода полю в форме в Excel

Fancybox 3 с темой оформления

 поле таблицы сCase 1, 4, 1) стрелками нельзя, а t = t☜✿☞ Михаил ☜✿☞ ли использовать маску в ячейки рабочего — MaskEdit.»=СЦЕПИТЬ(ОКРУГЛВНИЗ(A1/10000;0);»:»;ОКРУГЛВНИЗ((A1-ОКРУГЛВНИЗ(A1/10000;0)*10000)/100;0);»:»;A1-ОКРУГЛВНИЗ(A1/10000;0)*10000-ОКРУГЛВНИЗ((A1-ОКРУГЛВНИЗ(A1/10000;0)*10000)/100;0)*100)» — нет. Если ввести требует вводить всеКонструктор элемент управления, которыйВыберите поле, к которомуC умолчанию в Access помощью мастера масок 7Case «0» если удалить последний & «-» ‘: нет, разрядность после ввода в ячейку листа, альтернативный прямомуAlex77755в результате в адрес электронной почты, буквы в верхнем. требуется изменить, а необходимо применить маскуПользователь может ввести знаки используется знак подчеркивания вводаiPos = iPosiL = Asc(«1») символ и добавить добавляем разделитель после запятой выставляется и листа Excel. Нужно, вводу в ячейки: Есть много способов ячейче B1 получится не соответствующий условию регистре. Чтобы использоватьВыберите поле, для которого затем выберите в ввода. или пробелы. (_). Чтобы задатьСоздание настраиваемых масок ввода

 — 1iR = Asc(«9») в первый значение

 первых 3 и все чтобы он не листа (меню ‘Данные’, ограничить. Ограничь сами 13:18:27, причем Excel на значение, введенные маску ввода этого необходимо создать настраиваемую контекстном меню командуВ разделе

. , : ; — / другой знак, введитеПримеры масок вводаCase 3, 6Case «1», «2» уже изменяется 6 цифрIгор прокопенко ругался, а сам пункт ‘Форма…’.Comanche, ячейки на листе автоматически распознает это данные будут отклонены типа, необходимо задать маску ввода.СвойстваСвойства поляРазделитель целой и дробной его в третьемИспользование масок ввода дляiPos = iPosiL = Asc(«0»)т. е. будетIf t Like: Нужно поставить формат переделывал, например человекименно: ‘1. Форма через меню Данные->Проверка… значение как дату. и появится сообщение, для типа данныхВ области «Свойства поля».на вкладке части, групп разрядов, компоненте маски. адресов электронной почты — 2iR = Asc(«9») ;#-;-; # и «;-;-;» Then t ячеек «общий». вводит : «петров как ‘UserForm’ -

CyberForum.ru⁪>

Способ второй: переводим проценты в десятичную дробь

История и наследие jquery

Как вы помните, процент — сотая часть числа. В виде десятичной дроби это 0,01 (ноль целых одна сотовая). Следовательно, 17% – это 0,17 (ноль целых, семнадцать сотых), 45% – 0,45 (ноль целых, сорок пять сотых) и т. д. Полученную десятичную дробь умножаем на сумму, процент от которой считаем. И находим искомый ответ.

Например, давайте рассчитаем сумму подоходного налога от зарплаты 35 000 рублей. Налог составляет 13%. В виде десятичной дроби это будет 0,13 (ноль целых, тринадцать сотых). Умножим сумму 35 000 на 0,13. Получится 4 550. Значит, после вычета подоходного налога вам будет перечислена зарплата 35 000 – 4 550 = 30 050. Иногда эту сумму уже без налога называют «зарплатой на руки» или «чистой». В противовес этому сумму вместе с налогом «грязной зарплатой». Именно «грязную зарплату» указывают в объявлениях о вакансиях компании и в трудовом договоре. На руки же даётся меньше. Сколько? Теперь вы легко посчитаете.

Define custom definitions

.ready()

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

Supported markup options

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

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

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

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

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 {}.

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

Functions

mask

Create a mask for the input.

$(document).ready(function(){
   $(selector).inputmask('mask', { mask: "99-999-99"});
});

Get the unmaskedvalue

$(document).ready(function(){
   $(selector).inputmask('unmaskedvalue');
});

Remove the inputmask.

$(document).ready(function(){
    $(selector).inputmask('remove');
});

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 where cloned an can reactivate the masking. However when setting the value with jQuery.val there is none of the events triggered. The setvalue functionality does this for you.

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

3 ответов

Методы:

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

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)

First, include the jQuery and masked input javascript files.

<scriptsrc="jquery.js"type="text/javascript"><script><scriptsrc="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.

Overview

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

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

Применение:

Подключите JS файлы, которые вы можете найти в папке .

с помощью класса Inputmask

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

с помощью jquery плагина

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

или с помощью входящей в комлект поставки версии

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

с помощью data-inputmask атрибута

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

Любая опция также может быть передана через использование data-атрибута. Используйте data-inputmask-<имя опции>=»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");
});

Если вы хотите автоматически привязать маску ввода для отметки ввода с data-inputmask- … атрибутами, вы можете включить inputmask.binding.js

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

Если вы используете модуль загрузки requireJS

Добавьте в ваш config.js

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

Библиотеки зависимостей вы можете выбрать между поддерживаемыми библиотеками.

inputmask.dependencyLib (vanilla)
inputmask.dependencyLib.jquery
inputmask.dependencyLib.jqlite
…. (другие приветствуются)

Разрешенные HTML-элементы

(и все остальные при поддержке contenteditable)
любой html-элемент (текстовое содержимое маски или установка значения маски с jQuery.val)

Символы для маски по умолчанию

: цифры
: буквы алфавита
: буквы и цифры

Есть несколько символов для маски ввода, определенных в ваших расширениях.Вы можете найти информацию в JS-файлах или путем дальнейшего изучения опций.

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

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

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

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

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

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

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