Недавно столкнулся с огромным числом проблем при использовании самых популярных 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)
Когда clearMaskOnLostFocus: true в параметрах (по умолчанию), маска очистит необязательную часть, когда она не заполнена, и это только в случае, если дополнительная часть находится в конце маски.
$('#test').inputmask('999[-AAA]');
Хотя поле имеет фокус и пустое, пользователи будут видеть полную маску ___-___. Когда необходимая часть маски заполняется и поле теряет фокус, пользователь увидит 123. Когда и необходимые, и дополнительные части маски заполняются, и поле теряет фокус, пользователь увидит 123-ABC.
Дополнительные маски с жадным false
При определении дополнительной маски вместе с параметром «greedy: false», маска ввода покажет наименьшую возможную маску в качестве первого.
Вы можете определить маску как функцию, которая позволяет препроцитировать полученную маску. Пример сортировки для нескольких масок или динамического определения масок с помощью ajax. Предварительная обработка fn должна возвращать действительное определение маски.
$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});
Просто во время маскировки. С помощью опции jitMasking вы можете включить jit-маскирование. Маска будет видна только для введенных пользователем символов. По умолчанию: false
Значение может быть истинным или пороговым числом или ложным.
Когда вы вставляете или удаляете символы, они меняются только тогда, когда тип определения тот же. Это поведение можно переопределить, указав определение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({
onKeyValidation: function(key, result){
if (!result){
alert('Your input is not valid')
}
}
});
Проверьте, не замаскировано ли возвращаемое значение; в настоящее время надежно работает только при использовании 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);
Получите или установите опцию на существующую входную маску. Метод опций предназначен для добавления дополнительных параметров, таких как обратные вызовы и т. Д. В более позднее время к маске.
Когда устанавливаются дополнительные параметры, маску автоматически повторно применяют, если вы не используете true для аргумента noremask.
Вместо маскирования входного элемента также можно использовать входную маску для форматирования заданных значений. Подумайте о значениях форматирования, которые будут отображаться в 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: «” изменит автозаполнение по умолчанию с пустыми значениями
С помощью псевдонима вы можете определить определение сложной маски и вызвать его с помощью псевдонима. Таким образом, это в основном упрощает использование ваших масок. Некоторые псевдонимы, найденные в расширениях: электронная почта, валюта, десятичная цифра, целое число, дата, дата-время, дд / мм / гггг и т. Д.
Сначала вам нужно создать определение псевдонима. Определение псевдонима может содержать параметры маски, пользовательских определений, используемой маски и т. Д.
Когда вы передаете псевдоним, сначала разрешается псевдоним, а затем применяются другие параметры. Таким образом, вы можете вызвать псевдоним и передать другую маску для применения к псевдониму. Это также означает, что вы можете писать псевдонимы, которые «наследуют» от другого псевдонима.
Некоторые примеры можно найти в jquery.inputmask.xxx.extensions.js
используйте:
$("#date").inputmask("datetime");
или
$("#date").inputmask({ alias: "datetime"});
Вы также можете вызвать псевдоним и расширить его с помощью некоторых дополнительных параметров
Этот обратный вызов позволяет предварительно обработать вставленное значение, прежде чем фактически обрабатывать значение для маскировки. Это может быть полезно для удаления некоторых символов перед обработкой.
Выполняется перед записью в замаскированный элемент
Используйте это, чтобы выполнить дополнительную обработку ввода. Это может быть полезно при реализации псевдонима, например. десятичный псевдоним, автозаполнение цифр при выходе из поля ввода.
Аргументы функции: событие, буфер, caretPos, opts Возврат функции: объект команды (см. Определение пользовательских определений)
Чтобы убедиться, что маска не видна в фокусе, также установите для showMaskOnHover значение false. В противном случае зависание с помощью мыши установит маску и останется на фокусе.
Установив rightAlign, вы можете указать, чтобы выравнивать входную маску вправо. Это применяется только в сочетании с опцией numericInput или атрибутом dir. Значение по умолчанию – true.
Сделать побег вести себя как отменить. (Ctrl-Z) При нажатии кнопки escape возвращается значение до фокусировки. По умолчанию: true
radixPoint (числовые)
Определите радиус-точку (десятичный разделитель) По умолчанию: “”
groupSeparator (числовые)
Определите группу-разделитель По умолчанию: “”
keepStatic
По умолчанию: null (~ false) Использовать в сочетании с синтаксисом генератора. Старайтесь сохранять статичность маски при наборе текста. Решения по изменению маски будут отложены, если это возможно.
Крюк, чтобы изменить четкое поведение в 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».
Не возвращайте ничего, когда пользователь ничего не добавил.
По умолчанию: 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, если вам нужно какое-то настраиваемое позиционирование.
По умолчанию: false Отключает интеллектуальный текст на мобильных устройствах.
Что оно делает.
изменяет тип ввода на пароль => отключает прогностический текст
включает параметр colorMask, который создает div, который окружает вход.Поэтому мы вводим скрытый ввод пароля и визуализируем маску в созданном div.
Чтобы использовать 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
Вы можете определить внутри определения, чтобы автоматически применять какой-либо обсадную колонну на входе на входе, давая обсадную колонну. Корпус может быть нулевым, «верхним», «нижним» или «заголовком».
Вы также можете применить входную маску, используя атрибут data-inputmask. В атрибуте вы указываете параметры, необходимые для входной маски. Это получает синтаксический анализ $ .parseJSON (на данный момент), поэтому обязательно используйте хорошо сформированную json-строку без {}.
При клонировании входной маски, входная маска активируется при первом событии (центр мыши, фокус, …), который происходит со входом. Если вы хотите установить значение на клонированной входной маске и хотите непосредственно активировать маскировку, вам нужно использовать $(input).inputmask(“setvalue”, value)
“Скачать” отправляет на страницу, где по кнопке downloads ничего не происходит.
Но это не важно, ведь у вас не про версию 5.x
В новой версии все по-другому сделали, достаточного одного jquery.inputmask.js
как неконфликтно подключить расширения так и не разобралась, (зависимости летят)
А телефонная маска это теперь отдельный плагин
Приветствую! Подскажите пожалуйста, как в этом поле ввода номера телефона https://codepen.io/alelunegov/pen/wvaJrJZ
сделать так, что бы при первом вводе “8” включалась маска, но цифра “8” не появлялась, как сейчас происходит при нажатии “+” или “7”. Так же нужно, что бы “8” пропадала, если она стоит вначале строки, вставляемой в поле из буфера обмена.
Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0488830/public_html/romua1d.ru/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/romua1d.ru/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/romua1d.ru/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/romua1d.ru/www/wp-content/plugins/download-manager/libs/class.Package.php on line 71
“Скачать” отправляет на страницу, где по кнопке 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/romua1d.ru/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/romua1d.ru/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/romua1d.ru/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/romua1d.ru/www/wp-content/plugins/download-manager/libs/class.Package.php on line 71
Поправили проблему, спасибо!
Спасибо! Тут нашел, то что хотел!