Как сделать маску для телефона в sql
Для отдельных расширений.
Каждое расширение экспортирует Inputmask, поэтому вам нужно импортировать только расширения.
См. Пример.
Выбор dependencyLib
По умолчанию используется vanilla dependencyLib. Вы можете выбрать другую зависимость, создав псевдоним в файле webpack.config.
Применение
через класс Inputmask
через jquery plugin
через data-inputmask attribute
Любая опция также может быть передана с использованием атрибута data. Используйте data-inputmask- = “value”
Разрешенные HTML-элементы
Разрешенные типы входных данных определяются в опции supportsInputType. Также см. (Input-type-ref)
Дефолтные глобальные сущности
- 9 : числовой
- a : буквенный
- * : алфавитно-цифровой
В расширениях определено больше определений.
Вы можете найти информацию в js-файлах или путем дальнейшего изучения параметров.
Типы маскировки
Статические маски
Это самые основные маскировки. Маска определена и не будет меняться во время ввода.
Дополнительные маски
Можно определить некоторые части маски как необязательные. Это делается с помощью [].
Эта маска позволит вводить как (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 в параметрах (по умолчанию), маска очистит необязательную часть, когда она не заполнена, и это только в случае, если дополнительная часть находится в конце маски.
Хотя поле имеет фокус и пустое, пользователи будут видеть полную маску ___-___ . Когда необходимая часть маски заполняется и поле теряет фокус, пользователь увидит 123 . Когда и необходимые, и дополнительные части маски заполняются, и поле теряет фокус, пользователь увидит 123-ABC .
Дополнительные маски с жадным false
Показанная начальная маска будет “_” вместо “_-____”.
Динамические маски
Во время ввода могут меняться динамические маски. Для определения использования динамической части <>.
=> n повторов
=> с n по m повторов
Также и разрешены + начало с 1 и * начинается с 0.
Маски генератора
Синтаксис генератора аналогичен выражению OR. Маска может быть одним из трех вариантов, указанных в генераторе переменного тока.
Для определения генератора используйте |.
пример: “a|9” => a или 9
“(aaa)|(999)” => aaa или 999
“(aaa|999|9AA)” => aaa или 999 или 9AA
Также не забудьте прочитать опцию keepStatic.
Маски для предварительной обработки
Вы можете определить маску как функцию, которая позволяет препроцитировать полученную маску. Пример сортировки для нескольких масок или динамического определения масок с помощью ajax. Предварительная обработка fn должна возвращать действительное определение маски.
JIT Masking
Просто во время маскировки. С помощью опции jitMasking вы можете включить jit-маскирование. Маска будет видна только для введенных пользователем символов. По умолчанию: false
Значение может быть истинным или пороговым числом или ложным.
Определение пользовательских определений
Вы можете определить свои собственные определения для использования в маске.
Начните с выбора masksymbol.
validator(chrs, maskset, pos, strict, opts)
Затем определите свой валидатор. Валидатор может быть регулярным выражением или функцией.
Возвращаемое значение валидатора может быть истинным, ложным или командным объектом.
Параметры объекта команды
- pos : положение для вставки
- c : символ для вставки
- caret : положение каретки
- remove :положение (позиции) для удаления
- pos или[pos1, pos2]
- [< pos : position to insert, c : character to insert >, < …>, … ]
- true =>обновить validPositions из полного буфера
- < start: , end: >=>обновить от начала до конца
definitionSymbol
Когда вы вставляете или удаляете символы, они меняются только тогда, когда тип определения тот же. Это поведение можно переопределить, указав определениеSymbol. (см. пример x, y, z, который можно использовать для маскирования ip-адресов, проверка отличается, но разрешено переносить символы между определениями)
placeholder
Укажите местозаполнитель для определения. Это также может быть функцией.
set defaults
Значение по умолчанию может быть установлено следующим образом.
Но если свойство определено в псевдониме, вам нужно установить его для определения псевдонима.
Однако предпочтительным способом изменения свойств псевдонима является создание нового псевдонима, который наследует от определения псевдонима по умолчанию.
После определения вы можете вызвать псевдоним:
Все обратные вызовы реализованы как опции. Это означает, что вы можете установить общие реализации для обратных вызовов, установив значение по умолчанию.
Методы:
mask(elems)
Создайте маску для ввода.
unmaskedvalue
Value unmasking
Размаскируйте данное значение против маски.
remove
Удалите маску ввода.
getemptymask
вернуть значение маски по умолчанию (пустое)
hasMaskedValue
Проверьте, не замаскировано ли возвращаемое значение; в настоящее время надежно работает только при использовании jquery.val fn для извлечения значения
isComplete
Проверьте, завершено ли текущее значение или нет.
getmetadata
Метаданные фактической маски, представленные в определениях маски, можно получить, вызвав getmetadata. Если предоставляется только маска, определение маски будет возвращено getmetadata.
setvalue
Функция setvalue заключается в том, чтобы установить значение для входной маски, как это было бы с jQuery.val, но она будет запускать внутреннее событие, используемое входной маской, всегда, независимо от случая. Это особенно полезно при клонировании входной маски с помощью jQuery.clone. Клонирование входной маски не является полностью функциональным клоном.
На первом событии (центр мыши, фокус, …) входная маска может определить, клонируется ли она и может активировать маскировку. Однако при установке значения с помощью jQuery.val в этом случае не происходит ни одного события. Функция setvalue делает это для вас.option(options, noremask)
Получите или установите опцию на существующую входную маску. Метод опций предназначен для добавления дополнительных параметров, таких как обратные вызовы и т. Д. В более позднее время к маске.
Когда устанавливаются дополнительные параметры, маску автоматически повторно применяют, если вы не используете true для аргумента noremask.
format
Вместо маскирования входного элемента также можно использовать входную маску для форматирования заданных значений. Подумайте о значениях форматирования, которые будут отображаться в jqGrid или других элементах, а затем входы.
isValid
Подтвердите заданное значение против маски.
Options:
placeholder
Измените заполнитель маски. По умолчанию: “_”
или заполнить с несколькими символами
optionalmarker
Определение символов, используемых для указания дополнительной части в маске.
quantifiermarker
Определение символов, используемых для указания квантификатора в маске.
groupmarker
Определение символов, используемых для обозначения группы в маске.
alternatormarker
Определение символов, используемых для указания части генератора в маске.
escapeChar
Определение символов, используемых для исключения части в маске.
См. Escape-символы специальной маски
Маска для использования.
regex
Используйте регулярное выражение как маску
При использовании сокращений следует помнить, что вам нужно удвоить escape или использовать String.raw со строковым литералом.
oncomplete
Выполнить функцию при завершении маски
onincomplete
Выполните функцию, когда маска будет неполной. Выполняется размытие.
oncleared
Выполните функцию, когда маска очищается.
repeat
Функция повторения маски. Повторите определение маски x-times.
greedy
Переключитесь, чтобы выделить как можно больше или наоборот. Нежелательная функция повторения.
Если параметр non-greedy установлен в false, вы можете указать * в качестве повтора. Это делает бесконечный повтор.
autoUnmask
Автоматически разобрать значение при извлечении.
По умолчанию: false.При установке этой опции в true плагин также ожидает, что начальное значение с сервера будет разоблачено.
removeMaskOnSubmit
Удалите маску перед отправкой формы.
По умолчанию: falseclearMaskOnLostFocus
Удалите пустую маску при размытии или, если не пусто, удаляет необязательную конечную часть. Значение по умолчанию: true
insertMode
Переключить для вставки или перезаписывания ввода.
По умолчанию: true.
Этот параметр можно изменить, нажав клавишу Insert.clearIncomplete
Очистить неполный вход при размытии
aliases
С помощью псевдонима вы можете определить определение сложной маски и вызвать его с помощью псевдонима. Таким образом, это в основном упрощает использование ваших масок. Некоторые псевдонимы, найденные в расширениях: электронная почта, валюта, десятичная цифра, целое число, дата, дата-время, дд / мм / гггг и т. Д.
Сначала вам нужно создать определение псевдонима. Определение псевдонима может содержать параметры маски, пользовательских определений, используемой маски и т. Д.
Некоторые примеры можно найти в jquery.inputmask.xxx.extensions.js
Вы также можете вызвать псевдоним и расширить его с помощью некоторых дополнительных параметров
alias
Псевдоним для использования.
onKeyDown
Обратный вызов для реализации автозаполнения на определенных ключах, например
Аргументы функции: событие, буфер, caretPos, opts
Возврат функции:onBeforeMask
Выполняет перед маскировкой начальное значение, чтобы обеспечить предварительную обработку начального значения.
Аргументы функции: initialValue, opts
Возврат функции: modifiedValueonBeforePaste
Этот обратный вызов позволяет предварительно обработать вставленное значение, прежде чем фактически обрабатывать значение для маскировки. Это может быть полезно для удаления некоторых символов перед обработкой.
Аргументы функции: pastedValue, opts
Возврат функции: modifiedValueВы также можете отключить вставку значения, возвращая false в вызове onBeforePaste.
По умолчанию: вызывается onBeforeMask
onBeforeWrite
Выполняется перед записью в замаскированный элемент
Используйте это, чтобы выполнить дополнительную обработку ввода. Это может быть полезно при реализации псевдонима, например. десятичный псевдоним, автозаполнение цифр при выходе из поля ввода.
Аргументы функции: событие, буфер, caretPos, opts
Возврат функции: объект команды (см. Определение пользовательских определений)onUnMask
Выполняется после разоблачения, чтобы разрешить пост-обработку unmaskedvalue.
Аргументы функции: maskedValue, unmaskedValue
Возврат функции: modifiedValueshowMaskOnFocus
Показывает маску, когда вход получает фокус. (по умолчанию = true)
Чтобы убедиться, что маска не видна в фокусе, также установите для showMaskOnHover значение false. В противном случае зависание с помощью мыши установит маску и останется на фокусе.
showMaskOnHover
Показывает маску при наведении мыши. (по умолчанию = true)
onKeyValidation
Функция обратного вызова выполняется на каждом ключевом валиде с параметром key & result.
skipOptionalPartCharacter
numericInput
Числовое направление ввода. Сохраняет каретку в конце.
rightAlign
Выровняйте input вправо
Установив rightAlign, вы можете указать, чтобы выравнивать входную маску вправо. Это применяется только в сочетании с опцией numericInput или атрибутом dir. Значение по умолчанию – true.
undoOnEscape
Сделать побег вести себя как отменить. (Ctrl-Z)
При нажатии кнопки escape возвращается значение до фокусировки.
По умолчанию: trueradixPoint (числовые)
Определите радиус-точку (десятичный разделитель)
По умолчанию: “”groupSeparator (числовые)
Определите группу-разделитель
По умолчанию: “”keepStatic
По умолчанию: null (~ false) Использовать в сочетании с синтаксисом генератора. Старайтесь сохранять статичность маски при наборе текста. Решения по изменению маски будут отложены, если это возможно.
ввод 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 | falsecanClearPosition
Крюк, чтобы изменить четкое поведение в stripValidPositions
Args => maskset, position, lastValidPosition, opts
Return => true | falsepostValidation
Крюк для публикации. Вернуть результат из isValid. Полезно для проверки ввода в целом. Args => buffer, currentResult, opts
Возврат => true | false | объект командыpreValidation
Крюк для предварительного подтверждения ввода. Полезно для проверки независимо от определения. Args => buffer, pos, char, isSelection, opts => return true / false / command object При возврате true выполняется нормальная проверка, иначе пропущена.
staticDefinitionSymbol
Параметр staticDefinitionSymbol используется для указания, что статические записи в маске могут соответствовать определенному определению. Особенно полезно с генераторами, чтобы статический элемент в маске мог соответствовать другому чередованию.
nullable
Не возвращайте ничего, когда пользователь ничего не добавил.
По умолчанию: true
noValuePatching
Отключить привязку свойств свойства
По умолчанию: falsepositionCaretOnClick
Позиционирование курсора при нажатии.
- none
- lvp (на основе последнего действительного положения
(default) - radixFocus (position caret to radixpoint при первоначальном щелчке
) - select (выберите весь input)
По умолчанию: “lvp”
casing
Смените шрифт на уровне маски. Опции: null, “upper”, “lower” или “title”
или callback args => elem, test, pos, validPositions return charValueПо умолчанию: null
colorMask
По умолчанию: false Создайте маску с CSS.
Для использования этой опции вам необходимо указать inputmask.css.
Дополнительную информацию об используемом стили смотрите в файле inputmask.css. Вы можете переопределить Inputmask.prototype.positionColorMask, если вам нужно какое-то настраиваемое позиционирование.
disablePredictiveText
По умолчанию: false
Отключает интеллектуальный текст на мобильных устройствах.- изменяет тип ввода на пароль => отключает прогностический текст
- включает параметр colorMask, который создает div, который окружает вход.Поэтому мы вводим скрытый ввод пароля и визуализируем маску в созданном div.
Чтобы использовать colorMask, вам нужно включить inputmask.css, вам может потребоваться добавить некоторые CSS-настройки, чтобы сделать все визуально правильным на вашей странице.
importDataAttributes
Укажите, чтобы использовать атрибуты data-inputmask или игнорировать их.
Если вы не используете атрибуты данных, вы можете отключить импорт, указав importDataAttributes: false.
По умолчанию: true
Генеральная
установить значение и применить маску
это можно сделать с помощью традиционной функции jquery.val (всех браузеров) или свойства JavaScript для браузеров, которые реализуют lookupGetter или getOwnPropertyDescriptor
с autoUnmaskoption вы можете изменить возврат $ .fn.val (или свойства value) к unmaskedvalue или maskedvalue
избегать специальных символов маски
Если вы хотите, чтобы элемент маски отображался как статический элемент, вы можете избежать их с помощью \
auto-casing inputmask
Поддерживаемые параметры разметки
RTL атрибут
readonly атрибут
disabled атрибут
maxlength атрибут
data-inputmask атрибут
Вы также можете применить входную маску, используя атрибут data-inputmask. В атрибуте вы указываете параметры, необходимые для входной маски. Это получает синтаксический анализ $ .parseJSON (на данный момент), поэтому обязательно используйте хорошо сформированную json-строку без <>.
data-inputmask- атрибут
Все параметры также могут передаваться через атрибуты данных.
jQuery.clone
При клонировании входной маски, входная маска активируется при первом событии (центр мыши, фокус, …), который происходит со входом. Если вы хотите установить значение на клонированной входной маске и хотите непосредственно активировать маскировку, вам нужно использовать $(input).inputmask(“setvalue”, value)
Здравствуйте, создаю таблицу с помощью управляющего запроса SQL. Проблема не могу сделать маску ввода для поля [РабочийТелефон]. Вот что ввожу. Пишет ошибка синтаксиса. Подскажите как правильно сделать. Вот что ввожу
CREATE TABLE Поставщики
([КодПоставщика] Autoincrement,
[Организация] text (255) not null unique,
[Фамилия] text (20) not null,
[Имя] text (20) not null,
[Должность] text (50) not null,
[РабочийТелефон] text (14) (InputMask = "(999) 000-0000)",
[Примечания] memo,
CONSTRAINT [Индекс2] PRIMARY KEY ([КодПоставщика]));используете базы данных Microsoft. Я смотрю вы не ищите легких путей.
задание у меня такое, потом надо запрос показать как сделал. я бы давно уже всё сделал
Сергей Копылов Мудрец (12392) у вас по ходу скобка не закрыта в определении маски
Вот, даже ничего не зная о теме, могу сказать, что вот это:
(InputMask = "(999) 000-0000)" - ЛАЖА. Кавычки не должны закрываться ПОСЛЕ скобки.Подключение плагина
После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script :
Создание HTML маски ввода
Создания маски ввода осушествляется в js коде с помощью следующих знаков:
- Цифра 9 – соответствует цифре от 0 до 9.
- Символ a – представляет собой любой английский символ (A-Z, a-z).
- Знак * - представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).
Например рассмотрим процесс создания маски ввода телефона для элемента input , имеющего id="phone" :
Создание HTML элементу input маски ввода телефона
Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:
Использование различных заполнителей в масках ввода masked input
Кроме placeholder данный плагин имеет ещё параметр completed . Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.
Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак '?' . Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.
Например, пользователю необходимо ввести число от 0 до 0.99 . При этом обязательным для заполнения является указание хотя бы одного знака после запятой.
Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой
Настройка маски ввода Masked Input
Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков ( 9 , a , * ) свои собственные.
Например, создадим для маски специальный символ ~ , который при вводе должен быть заменён на знак ( + ) или минус ( - ).
Демонстрация работы маски для ввода положительного или отрицательного числа
Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:
Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате
Пример создания маски ввода телефона
Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:
Демонстрация работы маски для ввода телефона в зависимости от выбранной страны
Для создания маски в полях ввода существуют различные плагины jQuery. На мой взгляд самый лучший и быстрый вариант это плагин jQuery Inputmask от Robin Herbots. Он стабильно работает и у него большое количество возможностей и настроек.
Создание маски ввода с помощью плагина jQuery Inputmask
Скачиваем плагин отсюда . Там же находится полная документация по настройке плагина. И подключаем к сайту download партнерки скрипт jquery.maskedinput.min.js из папки dist. Перед скриптом конечно же нужно подключить библиотеку jQuery:
Читайте также: