Донецкий техникум промышленной автоматики

Коректна маска номера телефону Inputmask (4.x)

  1. Налаштування
  2. Класичне підключення <script>
  3. webpack
  4. вибір dependencyLib
  5. застосування
  6. Дефолтні глобальні суті
  7. типи маскування
  8. додаткові маски
  9. skipOptionalPartCharacter
  10. Додаткові маски з жадібним false
  11. динамічні маски
  12. маски генератора
  13. Маски для попередньої обробки
  14. JIT Masking
  15. Визначення власних визначень
  16. validator (chrs, maskset, pos, strict, opts)
  17. Параметри об'єкта команди
  18. placeholder
  19. set defaults
  20. методи:
  21. unmaskedvalue
  22. Value unmasking
  23. remove
  24. getemptymask
  25. hasMaskedValue
  26. isComplete
  27. getmetadata
  28. setvalue
  29. option (options, noremask)

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

  • jQuery Masked Input
  • jQuery Mask Plugin

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

Що робити, якщо не допомагає вирішити питання маски телефону жоден з полігонів? Панацея все таки знайшлася.

І вона називається 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! # $% &amp; '* + /=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*@ (?: [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 ! # $% &amp; '* + / =? ^ _ `{|} ~ \ -]", 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: положення (позиції) для видалення
  • 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));

oілі

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Що робити, якщо не допомагає вирішити питання маски телефону жоден з полігонів?
Amp; '* + /=?
Amp;'*+/=?
@ (?: [a-zA-Z0-9] (?: [a-zA-Z0-9 -] * [a-zA-Z0-9])?
A-zA-Z0-9] (?: [a-zA-Z0-9 -] * [a-zA-Z0-9])?
Amp; '* + / =?