Недавно столкнулся с огромным числом проблем при использовании самых популярных jQuery модулей, таких как:
Главной проблемой для меня был некоррекный процесс ввода номера телефона с определенных андроид устройств. Вроде бы ничего, но задница перфекциониста потребовала приключений и нашла. Недавно натолкнулся на такой баг на одном из известнейших сайте банка.
Что делать, если не помогает решить вопрос маски телефона ни один из плагинов? Панацея все таки нашлась.
И она называется Inputmask.
Предупреждаю заранее, что мне помогла лишь дев версия этого прекрасного плагина
к содержанию ↑Inputmask — это библиотека javascript, которая создает маску ввода. Inputmask может работать вместе с vanilla javascript, jQuery и jqlite.
Маска ввода помогает пользователю с вводом, обеспечивая предопределенного формат для поля ввода. Может быть очень полезно для дат, цифр, номеров телефонов и т.д.
Особенности:
Inputmask может работать с различными библиотеками javascript.
Вы можете выбрать между:
Включите 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>
к содержанию ↑ 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";
По умолчанию используется vanilla dependencyLib. Вы можете выбрать другую зависимость, создав псевдоним в файле webpack.config.
resolve: {
alias: {
"./dependencyLibs/inputmask.dependencyLib": "./dependencyLibs/inputmask.dependencyLib.jquery"
}
},
к содержанию ↑ 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);
$(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
});
<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"));
});
<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();
});
к содержанию ↑ <input >
<input type="search">
<input type="tel">
<input type="password">
<div > (и всех остальных, поддерживаемых contenteditable
)
<textarea>
Разрешенные типы входных данных определяются в опции 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: " "
Input => 121234 1234 mask => (12) 1234-1234 (trigger завершен)
Когда clearMaskOnLostFocus: true в параметрах (по умолчанию), маска очистит необязательную часть, когда она не заполнена, и это только в случае, если дополнительная часть находится в конце маски.
$('#test').inputmask('999[-AAA]');
Хотя поле имеет фокус и пустое, пользователи будут видеть полную маску ___-___
. Когда необходимая часть маски заполняется и поле теряет фокус, пользователь увидит 123
. Когда и необходимые, и дополнительные части маски заполняются, и поле теряет фокус, пользователь увидит 123-ABC
.
При определении дополнительной маски вместе с параметром «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"]; }});
к содержанию ↑ Просто во время маскировки. С помощью опции jitMasking вы можете включить jit-маскирование. Маска будет видна только для введенных пользователем символов. По умолчанию: false
Значение может быть истинным или пороговым числом или ложным.
Inputmask("datetime", { jitMasking: true }).mask(selector);
Вы можете определить свои собственные определения для использования в маске.
Начните с выбора masksymbol.
Затем определите свой валидатор. Валидатор может быть регулярным выражением или функцией.
Возвращаемое значение валидатора может быть истинным, ложным или командным объектом.
Когда вы вставляете или удаляете символы, они меняются только тогда, когда тип определения тот же. Это поведение можно переопределить, указав определение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"
}
});
к содержанию ↑ Укажите местозаполнитель для определения. Это также может быть функцией.
Значение по умолчанию может быть установлено следующим образом.
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')
}
}
});
к содержанию ↑ Создайте маску для ввода.
$(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
$(selector).inputmask('unmaskedvalue');
или
var input = document.getElementById(selector);
if (input.inputmask)
input.inputmask.unmaskedvalue()
Размаскируйте данное значение против маски.
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));
вернуть значение маски по умолчанию (пустое)
$(document).ready(function(){
$("#test").inputmask("999-AAA");
var initialValue = $("#test").inputmask("getemptymask"); // initialValue => "___-___"
});
Проверьте, не замаскировано ли возвращаемое значение; в настоящее время надежно работает только при использовании 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);
});
к содержанию ↑ Проверьте, завершено ли текущее значение или нет.
$(document).ready(function(){
if ($(selector).inputmask("isComplete")){
//do something
}
});
Метаданные фактической маски, представленные в определениях маски, можно получить, вызвав getmetadata. Если предоставляется только маска, определение маски будет возвращено getmetadata.
$(selector).inputmask("getmetadata");
Функция 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);
к содержанию ↑ Получите или установите опцию на существующую входную маску. Метод опций предназначен для добавления дополнительных параметров, таких как обратные вызовы и т. Д. В более позднее время к маске.
Когда устанавливаются дополнительные параметры, маску автоматически повторно применяют, если вы не используете 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);
}
})
к содержанию ↑ Вместо маскирования входного элемента также можно использовать входную маску для форматирования заданных значений. Подумайте о значениях форматирования, которые будут отображаться в jqGrid или других элементах, а затем входы.
var formattedDate = Inputmask.format("2331973", { alias: "datetime", inputFormat: "dd/mm/yyyy"});
Подтвердите заданное значение против маски.
var isValid = Inputmask.isValid("23/03/1973", { alias: "datetime", inputFormat: "dd/mm/yyyy"});
Измените заполнитель маски. По умолчанию: "_"
Вместо «_» вы можете изменить маску незаполненных символов, как вам нравится, просто добавив опцию placeholder.
Например, placeholder: «" изменит автозаполнение по умолчанию с пустыми значениями
или заполнить с несколькими символами
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "placeholder": "dd/mm/yyyy" });
});
к содержанию ↑ Определение символов, используемых для указания дополнительной части в маске.
optionalmarker: { start: "[", end: "]" }
Определение символов, используемых для указания квантификатора в маске.
quantifiermarker: { start: "{", end: "}" }
Определение символов, используемых для обозначения группы в маске.
groupmarker: { start: "(", end: ")" }
Определение символов, используемых для указания части генератора в маске.
alternatormarker: "|"
Определение символов, используемых для исключения части в маске.
escapeChar: "\\"
См. Escape-символы специальной маски
Маска для использования.
Inputmask({ mask: "9{*}").mask(selector);
Используйте регулярное выражение как маску
Inputmask({ regex: "[0-9]*" }).mask(selector);
При использовании сокращений следует помнить, что вам нужно удвоить escape или использовать String.raw со строковым литералом.
Inputmask({ regex: "\\d*" }).mask(selector);
~
Inputmask({ regex: String.raw`\d*` }).mask(selector);
к содержанию ↑ Выполнить функцию при завершении маски
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "oncomplete": function(){ alert('inputmask complete'); } });
});
Выполните функцию, когда маска будет неполной. Выполняется размытие.
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "onincomplete": function(){ alert('inputmask incomplete'); } });
});
Выполните функцию, когда маска очищается.
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "oncleared": function(){ alert('inputmask cleared'); } });
});
Функция повторения маски. Повторите определение маски x-times.
$(document).ready(function(){
$("#number").inputmask({ "mask": "9", "repeat": 10 }); // ~ mask "9999999999"
});
Переключитесь, чтобы выделить как можно больше или наоборот. Нежелательная функция повторения.
$(document).ready(function(){
$("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false }); // ~ mask "9" or mask "99" or ... mask "9999999999"
});
Если параметр non-greedy установлен в false, вы можете указать * в качестве повтора. Это делает бесконечный повтор.
к содержанию ↑Автоматически разобрать значение при извлечении.
По умолчанию: false.
При установке этой опции в true плагин также ожидает, что начальное значение с сервера будет разоблачено.
Удалите маску перед отправкой формы.
По умолчанию: false
Удалите пустую маску при размытии или, если не пусто, удаляет необязательную конечную часть. Значение по умолчанию: true
$(document).ready(function(){
$("#ssn").inputmask("999-99-9999",{placeholder:" ", clearMaskOnLostFocus: true }); //default
});
Переключить для вставки или перезаписывания ввода.
По умолчанию: true.
Этот параметр можно изменить, нажав клавишу Insert.
Очистить неполный вход при размытии
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});
Определения псевдонимов.
С помощью псевдонима вы можете определить определение сложной маски и вызвать его с помощью псевдонима. Таким образом, это в основном упрощает использование ваших масок. Некоторые псевдонимы, найденные в расширениях: электронная почта, валюта, десятичная цифра, целое число, дата, дата-время, дд / мм / гггг и т. Д.
Сначала вам нужно создать определение псевдонима. Определение псевдонима может содержать параметры маски, пользовательских определений, используемой маски и т. Д.
Когда вы передаете псевдоним, сначала разрешается псевдоним, а затем применяются другие параметры. Таким образом, вы можете вызвать псевдоним и передать другую маску для применения к псевдониму. Это также означает, что вы можете писать псевдонимы, которые «наследуют» от другого псевдонима.
Некоторые примеры можно найти в jquery.inputmask.xxx.extensions.js
используйте:
$("#date").inputmask("datetime");
или
$("#date").inputmask({ alias: "datetime"});
Вы также можете вызвать псевдоним и расширить его с помощью некоторых дополнительных параметров
$("#date").inputmask("datetime", { "clearIncomplete": true });
или
$("#date").inputmask({ alias: "datetime", "clearIncomplete": true });
к содержанию ↑ Псевдоним для использования.
$("#date").inputmask({ alias: "email"});
Обратный вызов для реализации автозаполнения на определенных ключах, например
Аргументы функции: событие, буфер, caretPos, opts
Возврат функции:
Выполняет перед маскировкой начальное значение, чтобы обеспечить предварительную обработку начального значения.
Аргументы функции: initialValue, opts
Возврат функции: modifiedValue
Этот обратный вызов позволяет предварительно обработать вставленное значение, прежде чем фактически обрабатывать значение для маскировки. Это может быть полезно для удаления некоторых символов перед обработкой.
Аргументы функции: 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
к содержанию ↑Выполняется перед записью в замаскированный элемент
Используйте это, чтобы выполнить дополнительную обработку ввода. Это может быть полезно при реализации псевдонима, например. десятичный псевдоним, автозаполнение цифр при выходе из поля ввода.
Аргументы функции: событие, буфер, caretPos, opts
Возврат функции: объект команды (см. Определение пользовательских определений)
Выполняется после разоблачения, чтобы разрешить пост-обработку unmaskedvalue.
Аргументы функции: maskedValue, unmaskedValue
Возврат функции: modifiedValue
$(document).ready(function(){
$("#number").inputmask("decimal", { onUnMask: function(maskedValue, unmaskedValue) {
//do something with the value
return unmaskedValue;
}});
});
Показывает маску, когда вход получает фокус. (по умолчанию = true)
$(document).ready(function(){
$("#ssn").inputmask("999-99-9999",{ showMaskOnFocus: true }); //default
});
Чтобы убедиться, что маска не видна в фокусе, также установите для showMaskOnHover значение false. В противном случае зависание с помощью мыши установит маску и останется на фокусе.
к содержанию ↑Показывает маску при наведении мыши. (по умолчанию = true)
$(document).ready(function(){
$("#ssn").inputmask("999-99-9999",{ showMaskOnHover: true }); //default
});
Функция обратного вызова выполняется на каждом ключевом валиде с параметром key & result.
$(document).ready(function(){
$("#ssn").inputmask("999-99-9999", {
onKeyValidation: function (key, result) {
console.log(key + " - " + result);
}
});
});
Числовое направление ввода. Сохраняет каретку в конце.
$(document).ready(function(){
$(selector).inputmask('€ 999.999.999,99', { numericInput: true }); //123456 => € ___.__1.234,56
});
Выровняйте input вправо
Установив rightAlign, вы можете указать, чтобы выравнивать входную маску вправо. Это применяется только в сочетании с опцией numericInput или атрибутом dir. Значение по умолчанию - true.
$(document).ready(function(){
$(selector).inputmask('decimal', { rightAlign: false }); //отключает правильное выравнивание десятичного входа
});
к содержанию ↑ Сделать побег вести себя как отменить. (Ctrl-Z)
При нажатии кнопки escape возвращается значение до фокусировки.
По умолчанию: true
Определите радиус-точку (десятичный разделитель)
По умолчанию: ""
Определите группу-разделитель
По умолчанию: ""
По умолчанию: 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, если явно не задано опциями.
к содержанию ↑Когда включено, позиция каретки устанавливается после последней действующей позиции в TAB. Значение по умолчанию: true
Позволяет выполнять табуляцию через разные части маскированного поля.
По умолчанию: false
С помощью этого 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(''));
}
});
Крюк, чтобы изменить четкое поведение в stripValidPositions
Args => maskset, position, lastValidPosition, opts
Return => true | false
Крюк для публикации. Вернуть результат из isValid. Полезно для проверки ввода в целом. Args => buffer, currentResult, opts
Возврат => true | false | объект команды
Крюк для предварительного подтверждения ввода. Полезно для проверки независимо от определения. Args => buffer, pos, char, isSelection, opts => return true / false / command object При возврате true выполняется нормальная проверка, иначе пропущена.
Параметр staticDefinitionSymbol используется для указания, что статические записи в маске могут соответствовать определенному определению. Особенно полезно с генераторами, чтобы статический элемент в маске мог соответствовать другому чередованию.
В приведенном ниже примере мы помещаем пробелы как возможное соответствие для определения «i». Таким образом, маска может чередоваться со второй маской, даже когда мы набрали уже «12 3».
Inputmask("(99 99 999999)|(i{+})", {
definitions: {
"i": {
validator: ".",
definitionSymbol: "*"
}
},
staticDefinitionSymbol: "*"
}).mask(selector);
к содержанию ↑ Не возвращайте ничего, когда пользователь ничего не добавил.
По умолчанию: true
Отключить привязку свойств свойства
По умолчанию: false
Позиционирование курсора при нажатии.
Опции:
По умолчанию: "lvp"
Смените шрифт на уровне маски. Опции: 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
По умолчанию: 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;
}
к содержанию ↑ По умолчанию: false
Отключает интеллектуальный текст на мобильных устройствах.
Что оно делает.
Чтобы использовать colorMask, вам нужно включить inputmask.css, вам может потребоваться добавить некоторые CSS-настройки, чтобы сделать все визуально правильным на вашей странице.
к содержанию ↑Укажите, чтобы использовать атрибуты 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");
});
Вы можете определить внутри определения, чтобы автоматически применять какой-либо обсадную колонну на входе на входе, давая обсадную колонну.
Корпус может быть нулевым, «верхним», «нижним» или «заголовком».
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
});
к содержанию ↑ <input id="test" dir="rtl" />
<input id="test" readonly="readonly" />
<input id="test" disabled="disabled" />
<input id="test" maxlength="4" />
Вы также можете применить входную маску, используя атрибут data-inputmask. В атрибуте вы указываете параметры, необходимые для входной маски. Это получает синтаксический анализ $ .parseJSON (на данный момент), поэтому обязательно используйте хорошо сформированную json-строку без {}.
<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
$(document).ready(function(){
$(":input").inputmask();
});
к содержанию ↑ Все параметры также могут передаваться через атрибуты данных.
<input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" />
$(document).ready(function(){
$(":input").inputmask();
});
При клонировании входной маски, входная маска активируется при первом событии (центр мыши, фокус, ...), который происходит со входом. Если вы хотите установить значение на клонированной входной маске и хотите непосредственно активировать маскировку, вам нужно использовать $(input).inputmask("setvalue", value)
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
Получение первого заказа на фрилансе может быть вызовом, особенно для новичков, которые еще не имеют…
Разработка сайтов и веб-приложений стала в наше время неизбежной потребностью. Тем не менее, существует несколько способов…
Компании и специалисты по маркетингу тратят много времени и денег на изучение языка поисковых систем,…
Адаптивные изображения - это набор методов, используемых для загрузки правильного изображения в зависимости от разрешения…
Политика конфиденциальности - это документ, в котором подробно описывается, как компания или организация обрабатывает любую…
В современном мире много специалистов занятых поддержанием работы сайтов, и довольно часто многих из них…
Смотреть комментарии
"Скачать" отправляет на страницу, где по кнопке downloads ничего не происходит.
Но это не важно, ведь у вас не про версию 5.x
В новой версии все по-другому сделали, достаточного одного jquery.inputmask.js
как неконфликтно подключить расширения так и не разобралась, (зависимости летят)
А телефонная маска это теперь отдельный плагин
Обновил. Можете скачивать
Приветствую! Подскажите пожалуйста, как в этом поле ввода номера телефона
https://codepen.io/alelunegov/pen/wvaJrJZ
сделать так, что бы при первом вводе "8" включалась маска, но цифра "8" не появлялась, как сейчас происходит при нажатии "+" или "7". Так же нужно, что бы "8" пропадала, если она стоит вначале строки, вставляемой в поле из буфера обмена.
Ссылка битая на скачивание
Поправили проблему, спасибо! Улучшили внешний вид статьи!
А это что вместо Cкачать?
Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0488830/public_html/web7.pro/www/wp-content/plugins/download-manager/libs/class.Package.php on line 48
Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0488830/public_html/web7.pro/www/wp-content/plugins/download-manager/libs/class.FileList.php on line 50
Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0488830/public_html/web7.pro/www/wp-content/plugins/download-manager/libs/class.FileList.php on line 188
Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0488830/public_html/web7.pro/www/wp-content/plugins/download-manager/libs/class.Package.php on line 71
Поправили проблему, спасибо!
Спасибо! Тут нашел, то что хотел!