Содержание:
Inputmask панацея

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

  • jQuery Masked Input
  • jQuery Mask Plugin

Главной проблемой для меня был некоррекный процесс ввода номера телефона с определенных андроид устройств. Вроде бы ничего, но задница перфекциониста потребовала приключений и нашла. Недавно натолкнулся на такой баг на одном из известнейших сайте банка.

Что делать, если не помогает решить вопрос маски телефона ни один из плагинов? Панацея все таки нашлась.

И она называется Inputmask. 

Предупреждаю заранее, что мне помогла лишь дев версия этого прекрасного плагина

Inputmask

Inputmask – это библиотека javascript, которая создает маску ввода. Inputmask может работать вместе с vanilla javascript, jQuery и jqlite.

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

Особенности:

  • простота в ипользовании
  • маски даты/времени
  • числовые маски
  • много callbacks
  • многие функции могут быть включены / отключены / настроены с помощью опций
  • поддерживает атрибуты readonly / disabled / dir = “rtl”
  • атрибуты поддержки данных inputmask
  • маска генератор
  • маска regex
  • динамическая маска
  • Предварительная обработка маски
  • JIT-маскирования
  • форматирование / валидация значения без элемента ввода
  • Поддержка AMD / CommonJS
  • Библиотеки зависимости: vanilla javascript, jQuery, jqlite
  • Поддержка Android
к содержанию ↑

Настройка

dependencyLibs

Inputmask может работать с различными библиотеками javascript.
Вы можете выбрать между:

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

Классическое подключение <script>

Включите js-файлы, которые вы можете найти в папке dist.

Если вы хотите включить Inputmask и все расширения. (с jQuery как dependencylib)

<script src="jquery.js"></script>
<script src="dist/jquery.inputmask.bundle.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>

Для отдельных расширений. (с jQuery как dependencylib)

<script src="jquery.js"></script>
<script src="dist/inputmask/inputmask.js"></script>
<script src="dist/inputmask/inputmask.extensions.js"></script>
<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="dist/inputmask/inputmask.date.extensions.js"></script>
<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="dist/inputmask/jquery.inputmask.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>

Для отдельных расширений. (с vanilla dependencylib)

<script src="dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="dist/inputmask/inputmask.js"></script>
<script src="dist/inputmask/inputmask.extensions.js"></script>
<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="dist/inputmask/inputmask.date.extensions.js"></script>
<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>

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

<script src="dist/inputmask/bindings/inputmask.binding.js"></script>
к содержанию ↑

webpack

Установка пакета

npm install inputmask --save
Установка последней бета версии
npm install inputmask@next --save

В Ваших модулях

Если вы хотите подключить все расширения

var Inputmask = require('inputmask');
//es6
import Inputmask from "inputmask";

Для отдельных расширений.
Каждое расширение экспортирует Inputmask, поэтому вам нужно импортировать только расширения.
См. Пример.

require("inputmask/dist/inputmask/inputmask.numeric.extensions");
var Inputmask = require("inputmask/dist/inputmask/inputmask.date.extensions");
//es6
import "inputmask/dist/inputmask/inputmask.numeric.extensions";
import Inputmask from "inputmask/dist/inputmask/inputmask.date.extensions";

Выбор dependencyLib

По умолчанию используется vanilla dependencyLib. Вы можете выбрать другую зависимость, создав псевдоним в файле webpack.config.

 resolve: {
        alias: {
            "./dependencyLibs/inputmask.dependencyLib": "./dependencyLibs/inputmask.dependencyLib.jquery"
        }
    },
к содержанию ↑

Применение

через класс Inputmask

var selector = document.getElementById("selector");
var im = new Inputmask("99-9999999");
im.mask(selector);
  
//or
  
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);
  
Inputmask({ regex: "\\d*" }).mask(selector);
Inputmask({ regex: String.raw`\d*` }).mask(selector);

 через jquery plugin

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

<input data-inputmask="'alias': 'datetime'" />
<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!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
$(document).ready(function(){
  $("#example1").inputmask("99-9999999");
  $("#example2").inputmask();
});
к содержанию ↑

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

  • <input type="text">
  • <input type="search">
  • <input type="tel">
  • <input type="password">
  • <div contenteditable="true"> (и всех остальных, поддерживаемых contenteditable)
  • <textarea>
  • любой html-элемент (содержимое текста маски или заданное значение maskedvalue с помощью jQuery.val)

Разрешенные типы входных данных определяются в опции supportsInputType. Также см. (Input-type-ref)

к содержанию ↑

Дефолтные глобальные сущности

  • 9 : числовой
  • a : буквенный
  • * : алфавитно-цифровой

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

Типы маскировки

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

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

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

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

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

Пример:

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

Эта маска позволит вводить как (99) 99999-9999 так и (99) 9999-9999.

Input => 12123451234 mask => (12) 12345-1234 (trigger завершен)
Input => 121234-1234 mask => (12) 1234-1234 (trigger завершен)
Input => 1212341234 mask => (12) 12341-234_ (trigger не завершен)

skipOptionalPartCharacter

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

skipOptionalPartCharacter: " "

Input => 121234 1234 mask => (12) 1234-1234 (trigger завершен)

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

$('#test').inputmask('999[-AAA]');

Хотя поле имеет фокус и пустое, пользователи будут видеть полную маску ___-___. Когда необходимая часть маски заполняется и поле теряет фокус, пользователь увидит 123. Когда и необходимые, и дополнительные части маски заполняются, и поле теряет фокус, пользователь увидит 123-ABC.

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

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

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

Показанная начальная маска будет “_” вместо “_-____”.

к содержанию ↑

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

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

{n} => n повторов
{n|j} => n повторов, с j jitmasking
{n,m} => с n по m повторов
{n,m|j} => с n по m повторов, с j jitmasking

Также {+} и {*} разрешены + начало с  1 и * начинается с  0.

$(document).ready(function(){
  $(selector).inputmask("aa-9{4}");  //статическая маска с динамическим синтаксисом
  $(selector).inputmask("aa-9{1,4}");  //динамическая маска ~ 9 def может происходить от 1 до 4 раз
  //маска электронной почты
  $(selector).inputmask({
    mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
    greedy: false,
    onBeforePaste: function (pastedValue, opts) {
      pastedValue = pastedValue.toLowerCase();
      return pastedValue.replace("mailto:", "");
    },
    definitions: {
      '*': {
        validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
        casing: "lower"
      }
    }
  });
  //десятичная маска
   Inputmask("(.999){+|1},00", {
        positionCaretOnClick: "radixFocus",
        radixPoint: ",",
        _radixDance: true,
        numericInput: true,
        placeholder: "0",
        definitions: {
            "0": {
                validator: "[0-9\uFF11-\uFF19]"
            }
        }
   }).mask(selector);
});
к содержанию ↑

Маски генератора

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

Для определения генератора используйте |.
пример: “a|9” => a или 9
“(aaa)|(999)” => aaa или 999
“(aaa|999|9AA)” => aaa или 999 или 9AA

Также не забудьте прочитать опцию keepStatic.

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

или

$("selector").inputmask({
  mask: ["99.9", "X"],
  definitions: {
    "X": {
      validator: "[xX]",
      casing: "upper"
    }
  }
});
к содержанию ↑

Маски для предварительной обработки

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

$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});
к содержанию ↑

JIT Masking

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

Значение может быть истинным или пороговым числом или ложным.

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

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

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

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

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

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

Параметры объекта команды

  • pos : положение для вставки
  • c : символ для вставки
  • caret : положение каретки
  • remove :положение (позиции) для удаления
    • pos или[pos1, pos2]
  • insert : position(s) в добавление:
    • { pos : position to insert, c : character to insert }
    • [{ pos : position to insert, c : character to insert }, { …}, … ]
  • refreshFromBuffer :
    • true =>обновить validPositions из полного буфера
    • { start: , end: } =>обновить от начала до конца
к содержанию ↑

definitionSymbol

Когда вы вставляете или удаляете символы, они меняются только тогда, когда тип определения тот же. Это поведение можно переопределить, указав определениеSymbol. (см. пример x, y, z, который можно использовать для маскирования ip-адресов, проверка отличается, но разрешено переносить символы между определениями)

Inputmask.extendDefinitions({
  'f': {  //masksymbol
    "validator": "[0-9\(\)\.\+/ ]"
  },
  'g': {
    "validator": function (chrs, buffer, pos, strict, opts) {
      //do some logic and return true, false, or { "pos": new position, "c": character to place }
    }
  },
  'j': { //basic year
    validator: "(19|20)\\d{2}"
  },
  'x': {
    validator: "[0-2]",
    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[0-5]|[01][0-9]");
      return valExp2.test(buffer[pos - 1] + chrs);
    },
    definitionSymbol: "i"
  },
  'z': {
    validator: function (chrs, buffer, pos, strict, opts) {
      var valExp3 = new RegExp("25[0-5]|2[0-4][0-9]|[01][0-9][0-9]");
      return valExp3.test(buffer[pos - 2] + buffer[pos - 1] + chrs);
    },
    definitionSymbol: "i"
  }
});
к содержанию ↑

placeholder

Укажите местозаполнитель для определения. Это также может быть функцией.

set defaults

Значение по умолчанию может быть установлено следующим образом.

Inputmask.extendDefaults({
  'autoUnmask': true
});
Inputmask.extendDefinitions({
  'A': {
    validator: "[A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    casing: "upper" //auto uppercasing
  },
  '+': {
    validator: "[0-9A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    casing: "upper"
  }
});
Inputmask.extendAliases({
  'numeric': {
    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('Your input is not valid')
    }
  }
});
к содержанию ↑

Методы:

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

получить unmaskedvalue

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

или

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

Value unmasking

Размаскируйте данное значение против маски.

var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "dd/mm/yyyy"}); //23031973
к содержанию ↑

remove

Удалите маску ввода.

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

или

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

или

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

getemptymask

вернуть значение маски по умолчанию (пустое)

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

hasMaskedValue

Проверьте, не замаскировано ли возвращаемое значение; в настоящее время надежно работает только при использовании jquery.val fn для извлечения значения

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

Функция setvalue заключается в том, чтобы установить значение для входной маски, как это было бы с jQuery.val, но она будет запускать внутреннее событие, используемое входной маской, всегда, независимо от случая. Это особенно полезно при клонировании входной маски с помощью jQuery.clone. Клонирование входной маски не является полностью функциональным клоном.
На первом событии (центр мыши, фокус, …) входная маска может определить, клонируется ли она и может активировать маскировку. Однако при установке значения с помощью jQuery.val в этом случае не происходит ни одного события. Функция setvalue делает это для вас.

$(selector).inputmask("setvalue", value);  
  
var selector = document.getElementById("selector");
selector.inputmask.setValue(value);  
  
Inputmask.setValue(selector, value);
к содержанию ↑

option(options, noremask)

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

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

Установите опцию

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

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

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

isValid

Подтвердите заданное значение против маски.

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

Options:

placeholder

Измените заполнитель маски. По умолчанию: “_”

Вместо «_» вы можете изменить маску незаполненных символов, как вам нравится, просто добавив опцию placeholder.
Например, placeholder: «” изменит автозаполнение по умолчанию с пустыми значениями

или заполнить с несколькими символами

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "placeholder": "dd/mm/yyyy" });
});
к содержанию ↑

optionalmarker

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

optionalmarker: { start: "[", end: "]" }

quantifiermarker

Определение символов, используемых для указания квантификатора в маске.

quantifiermarker: { start: "{", end: "}" }

groupmarker

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

groupmarker: { start: "(", end: ")" }

alternatormarker

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

alternatormarker: "|"

escapeChar

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

escapeChar: "\\"

См. Escape-символы специальной маски

mask

Маска для использования.

Inputmask({ mask: "9{*}").mask(selector);

regex

Используйте регулярное выражение как маску

Inputmask({ regex: "[0-9]*" }).mask(selector);

При использовании сокращений следует помнить, что вам нужно удвоить escape или использовать String.raw со строковым литералом.

Inputmask({ regex: "\\d*" }).mask(selector);
~  
Inputmask({ regex: String.raw`\d*` }).mask(selector);
к содержанию ↑

oncomplete

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

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "oncomplete": function(){ alert('inputmask complete'); } });
});

onincomplete

Выполните функцию, когда маска будет неполной. Выполняется размытие.

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "onincomplete": function(){ alert('inputmask incomplete'); } });
});

oncleared

Выполните функцию, когда маска очищается.

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "oncleared": function(){ alert('inputmask cleared'); } });
});

repeat

Функция повторения маски. Повторите определение маски x-times.

$(document).ready(function(){
  $("#number").inputmask({ "mask": "9", "repeat": 10 });  // ~ mask "9999999999"
});

greedy

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

$(document).ready(function(){
  $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false });  // ~ mask "9" or mask "99" or ... mask "9999999999"
});

Если параметр non-greedy установлен в false, вы можете указать * в качестве повтора. Это делает бесконечный повтор.

к содержанию ↑

autoUnmask

Автоматически разобрать значение при извлечении.
По умолчанию: false.

При установке этой опции в true плагин также ожидает, что начальное значение с сервера будет разоблачено.

removeMaskOnSubmit

Удалите маску перед отправкой формы.
По умолчанию: false

clearMaskOnLostFocus

Удалите пустую маску при размытии или, если не пусто, удаляет необязательную конечную часть. Значение по умолчанию: true

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{placeholder:" ", clearMaskOnLostFocus: true }); //default
});

insertMode

Переключить для вставки или перезаписывания ввода.
По умолчанию: true.
Этот параметр можно изменить, нажав клавишу Insert.

clearIncomplete

Очистить неполный вход при размытии

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});

aliases

Определения псевдонимов.

С помощью псевдонима вы можете определить определение сложной маски и вызвать его с помощью псевдонима. Таким образом, это в основном упрощает использование ваших масок. Некоторые псевдонимы, найденные в расширениях: электронная почта, валюта, десятичная цифра, целое число, дата, дата-время, дд / мм / гггг и т. Д.

Сначала вам нужно создать определение псевдонима. Определение псевдонима может содержать параметры маски, пользовательских определений, используемой маски и т. Д.

Когда вы передаете псевдоним, сначала разрешается псевдоним, а затем применяются другие параметры. Таким образом, вы можете вызвать псевдоним и передать другую маску для применения к псевдониму. Это также означает, что вы можете писать псевдонимы, которые «наследуют» от другого псевдонима.

Некоторые примеры можно найти в jquery.inputmask.xxx.extensions.js

используйте:

$("#date").inputmask("datetime");

или

$("#date").inputmask({ alias: "datetime"});

Вы также можете вызвать псевдоним и расширить его с помощью некоторых дополнительных параметров

$("#date").inputmask("datetime", { "clearIncomplete": true });

или

$("#date").inputmask({ alias: "datetime", "clearIncomplete": true });
к содержанию ↑

alias

Псевдоним для использования.

$("#date").inputmask({ alias: "email"});

onKeyDown

Обратный вызов для реализации автозаполнения на определенных ключах, например

Аргументы функции: событие, буфер, caretPos, opts
Возврат функции:

onBeforeMask

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

Аргументы функции: initialValue, opts
Возврат функции: modifiedValue

onBeforePaste

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

Аргументы функции: pastedValue, opts
Возврат функции: modifiedValue

$(selector).inputmask({
  mask: '9999 9999 9999 9999',
  placeholder: ' ',
  showMaskOnHover: false,
  showMaskOnFocus: false,
  onBeforePaste: function (pastedValue, opts) {
    var processedValue = pastedValue;
    //что-то делаете
    return processedValue;
  }
});

Вы также можете отключить вставку значения, возвращая false в вызове onBeforePaste.

По умолчанию: вызывается onBeforeMask

к содержанию ↑

onBeforeWrite

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

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

Аргументы функции: событие, буфер, caretPos, opts
Возврат функции: объект команды (см. Определение пользовательских определений)

к содержанию ↑

onUnMask

Выполняется после разоблачения, чтобы разрешить пост-обработку unmaskedvalue.

Аргументы функции: maskedValue, unmaskedValue
Возврат функции: modifiedValue

$(document).ready(function(){
  $("#number").inputmask("decimal", { onUnMask: function(maskedValue, unmaskedValue) {
    //do something with the value
    return unmaskedValue;
  }});
});

showMaskOnFocus

Показывает маску, когда вход получает фокус. (по умолчанию = true)

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{ showMaskOnFocus: true }); //default
});

Чтобы убедиться, что маска не видна в фокусе, также установите для showMaskOnHover значение false. В противном случае зависание с помощью мыши установит маску и останется на фокусе.

к содержанию ↑

showMaskOnHover

Показывает маску при наведении мыши. (по умолчанию = true)

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{ showMaskOnHover: true }); //default
});

onKeyValidation

Функция обратного вызова выполняется на каждом ключевом валиде с параметром key & result.

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999", {
    onKeyValidation: function (key, result) {
      console.log(key + " - " + result);
    }
  });
});

skipOptionalPartCharacter

numericInput

Числовое направление ввода. Сохраняет каретку в конце.

$(document).ready(function(){
  $(selector).inputmask('€ 999.999.999,99', { numericInput: true });    //123456  =>  € ___.__1.234,56
});

rightAlign

Выровняйте input вправо

Установив rightAlign, вы можете указать, чтобы выравнивать входную маску вправо. Это применяется только в сочетании с опцией numericInput или атрибутом dir. Значение по умолчанию – true.

$(document).ready(function(){
  $(selector).inputmask('decimal', { rightAlign: false });  //отключает правильное выравнивание десятичного входа
});
к содержанию ↑

undoOnEscape

Сделать побег вести себя как отменить. (Ctrl-Z)
При нажатии кнопки escape возвращается значение до фокусировки.
По умолчанию: true

radixPoint (числовые)

Определите радиус-точку (десятичный разделитель)
По умолчанию: “”

groupSeparator (числовые)

Определите группу-разделитель
По умолчанию: “”

keepStatic

По умолчанию: null (~ false) Использовать в сочетании с синтаксисом генератора. Старайтесь сохранять статичность маски при наборе текста. Решения по изменению маски будут отложены, если это возможно.

// ex.
$(selector).inputmask({ mask: ["+55-99-9999-9999", "+55-99-99999-9999", ], keepStatic: true });

ввод 1212345123 => должен привести к + 55-12-1234-5123 типу дополнительного 4 => к + 55-12-12345-1234

При передаче нескольких масок (массив масок) keepStatic автоматически устанавливается в true, если явно не задано опциями.

к содержанию ↑

positionCaretOnTab

Когда включено, позиция каретки устанавливается после последней действующей позиции в TAB. Значение по умолчанию: true

tabThrough

Позволяет выполнять табуляцию через разные части маскированного поля.
По умолчанию: false

определения

ignorables

isComplete

С помощью этого call-in (hook) вы можете переопределить реализацию функции isComplete по умолчанию.
Args => buffer, opts Return => true | false

$(selector).inputmask({
  regex: "[0-9]*",
  isComplete: function(buffer, opts) {
    return new RegExp(opts.regex).test(buffer.join(''));
  }
});

canClearPosition

Крюк, чтобы изменить четкое поведение в stripValidPositions
Args => maskset, position, lastValidPosition, opts
Return => true | false

postValidation

Крюк для публикации. Вернуть результат из isValid. Полезно для проверки ввода в целом. Args => buffer, currentResult, opts
Возврат => true | false | объект команды

preValidation

Крюк для предварительного подтверждения ввода. Полезно для проверки независимо от определения. Args => buffer, pos, char, isSelection, opts => return true / false / command object При возврате true выполняется нормальная проверка, иначе пропущена.

staticDefinitionSymbol

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

В приведенном ниже примере мы помещаем пробелы как возможное соответствие для определения «i». Таким образом, маска может чередоваться со второй маской, даже когда мы набрали уже «12 3».

Inputmask("(99 99 999999)|(i{+})", {
  definitions: {
    "i": {
      validator: ".",
      definitionSymbol: "*"
    }
  },
  staticDefinitionSymbol: "*"
}).mask(selector);
к содержанию ↑

nullable

Не возвращайте ничего, когда пользователь ничего не добавил.

По умолчанию: true

noValuePatching

Отключить привязку свойств свойства
По умолчанию: false

positionCaretOnClick

Позиционирование курсора при нажатии.

Опции:

  • none
  • lvp (на основе последнего действительного положения
    (default)
  • radixFocus (position caret to radixpoint при первоначальном щелчке
    )
  • select (выберите весь input)

По умолчанию: “lvp”

casing

Смените шрифт на уровне маски. Опции: null, “upper”, “lower” или “title”
или callback args => elem, test, pos, validPositions return charValue

casing: function(elem, test, pos, validPositions) {
 do some processing || upper/lower input property in the validPositions
 return elem; //upper/lower element
}

По умолчанию: null

colorMask

По умолчанию: false Создайте маску с CSS.

Для использования этой опции вам необходимо указать inputmask.css.

Дополнительную информацию об используемом стили смотрите в файле inputmask.css. Вы можете переопределить Inputmask.prototype.positionColorMask, если вам нужно какое-то настраиваемое позиционирование.

Inputmask.prototype.positionColorMask = function (input, template) {
    template.style.left = input.offsetLeft + "px";
    template.zIndex = input.zIndex - 1;
}
к содержанию ↑

disablePredictiveText

По умолчанию: false
Отключает интеллектуальный текст на мобильных устройствах.

Что оно делает.

  • изменяет тип ввода на пароль => отключает прогностический текст
  • включает параметр colorMask, который создает div, который окружает вход.Поэтому мы вводим скрытый ввод пароля и визуализируем маску в созданном div.

Чтобы использовать colorMask, вам нужно включить inputmask.css, вам может потребоваться добавить некоторые CSS-настройки, чтобы сделать все визуально правильным на вашей странице.

к содержанию ↑

importDataAttributes

Укажите, чтобы использовать атрибуты data-inputmask или игнорировать их.

Если вы не используете атрибуты данных, вы можете отключить импорт, указав importDataAttributes: false.

По умолчанию: true

Генеральная

установить значение и применить маску

это можно сделать с помощью традиционной функции jquery.val (всех браузеров) или свойства JavaScript для браузеров, которые реализуют lookupGetter или getOwnPropertyDescriptor

$(document).ready(function(){
  $("#number").val(12345);
  var number = document.getElementById("number");
  number.value = 12345;
});

с autoUnmaskoption вы можете изменить возврат $ .fn.val (или свойства value) к unmaskedvalue или 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)
});
к содержанию ↑

избегать специальных символов маски

Если вы хотите, чтобы элемент маски отображался как статический элемент, вы можете избежать их с помощью \

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

auto-casing inputmask

Вы можете определить внутри определения, чтобы автоматически применять какой-либо обсадную колонну на входе на входе, давая обсадную колонну.
Корпус может быть нулевым, «верхним», «нижним» или «заголовком».

Inputmask.extendDefinitions({
  'A': {
    validator: "[A-Za-z]",
    casing: "upper" //автоматический верхний регистр
  },
  '+': {
    validator: "[A-Za-z\u0410-\u044F\u0401\u04510-9]",
    casing: "upper"
  }
});

Включите jquery.inputmask.extensions.js для использования определений A и #.

$(document).ready(function(){
  $("#test").inputmask("999-AAA");    //   => 123abc ===> 123-ABC
});
к содержанию ↑

Поддерживаемые параметры разметки

RTL атрибут

<input id="test" dir="rtl" />

readonly атрибут

<input id="test" readonly="readonly" />

disabled атрибут

maxlength атрибут

<input id="test" disabled="disabled" />
<input id="test" maxlength="4" />

data-inputmask атрибут

Вы также можете применить входную маску, используя атрибут data-inputmask. В атрибуте вы указываете параметры, необходимые для входной маски. Это получает синтаксический анализ $ .parseJSON (на данный момент), поэтому обязательно используйте хорошо сформированную json-строку без {}.

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
$(document).ready(function(){
  $(":input").inputmask();
});
к содержанию ↑

data-inputmask-<опция> атрибут

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

<input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" />
$(document).ready(function(){
  $(":input").inputmask();
});

jQuery.clone

При клонировании входной маски, входная маска активируется при первом событии (центр мыши, фокус, …), который происходит со входом. Если вы хотите установить значение на клонированной входной маске и хотите непосредственно активировать маскировку, вам нужно использовать  $(input).inputmask(“setvalue”, value)

Скачать

Inputmask

Значок
Размер: 261kb
Скачано (раз): 1355
Версия: 5.x (latest)
ФайлДействие
5.zipСкачать 
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

, , , , , , ,
Показать комментарии

Romuald Shmidtelson

Об авторе

Web Developer. Имею экспертизу в таких вещах как FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Смотреть посты