Masked input: digitalBush/jquery.maskedinput: jQuery Masked Input Plugin

Для начала мы рассмотрим два разных сценария.

Сценарий маскирования ввода № 1:

Для первого сценария давайте рассмотрим этот, используя простую Short Text , поэтому добавьте его в свою форму прямо сейчас, если вы еще этого не сделали. Чтобы просмотреть параметр Маска ввода , выполните следующие действия: 

1. Щелкните элемент «Краткий текст».
2. С правой стороны элемента щелкните Свойства (значок шестеренки).
3. Перейдите на вкладку Параметры .
4. Прокрутите вниз и найдите параметр Input Mask , обязательно включите его.

При маскировании ввода вы будете использовать только три символа HTML, и эти символы объясняются прямо под переключателем «Маска ввода».

@  =  Маски Буквы

#    =   Маски Числа

*    =  и, следовательно, ограничивает ваших пользователей замаскированными входами.

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

Пример А:

Допустим, в этом примере вы хотите назвать города, которые начинаются с «Св.» (Святой), например «Св. Августин», что будет выглядеть так: « @@ @@@@@@@@ @».

Внутренняя часть вашей формы:

Передняя часть вашей формы:

Пример B:

Теперь давайте взглянем на это в другом примере, где вы, возможно, захотите показать набор разделенных чисел, которые отображать так: « # # # # # ».

Серверная часть вашей формы:

Передняя часть вашей формы:

Пример C:

Маска чисел также может использоваться для расширенных настраиваемых дат, где вы, возможно, не захотите использовать стандартные поля даты, такие как « ##/##». /####».

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример D:

И то, и другое хорошо, но что, если вам нужно что-то большее, но вам это не нужно много информации, например, в случае, когда вам нужен только адрес, где находится чья-то компания.

Таким образом, в этом конкретном случае вы хотели бы объединить вышеперечисленное, используя вместе @ и # , и это может выглядеть примерно так: « #### @@@@@@@@@ @@ ».

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример E:

Кроме того, не забывайте, что вы можете дополнительно разрешить любой из них, но при этом контролировать, но ограничить это с помощью третьего варианта с помощью  *  (звездочка), и это будет выглядеть примерно так: » *** ** **** ** *** ».

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример F:

Но что, если ничего из вышеперечисленного не подходит для вашей ситуации? Что, если вы работаете в правительстве, юриспруденции или даже в компании по производству автозапчастей? Вы также можете сделать это, разделив своих персонажей на части, чтобы создать что-то систематическое, например « #@-#**#-#@ ».

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример G:

Некоторые из приведенных выше примеров имеют фиксированную маскировку ввода, так что, если вы хотите, чтобы пользователи могли вводить символы, но не требовали всего этого? Например, номер участника, который заканчивается одним или двумя символами. Вы можете сделать маскировку ввода как « @@-#####-@[@] ». Как видите, мы используем квадратную скобку для необязательного символа.

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Теперь давайте посмотрим на это с другой стороны, используя второй сценарий для поля телефона.

Сценарий маскирования ввода № 2:

Конечно, использование возможности маскирования удобно, но что, если вы являетесь поставщиком телефонных справочников и ищете номера 1-800 для списка, или у вас есть пользователи с иностранными телефонными номерами и т.п.?

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

Пример A:

Для первого примера давайте начнем снова, но на этот раз добавим поле телефона. Вы должны иметь доступ к опции «Маска ввода» так же, как мы описали ранее в этом руководстве.

На этот раз вы заметите, что можете использовать маскировку номера только с помощью #, и вы также увидите изменение ввода телефонного номера по умолчанию с двух вводов на один ввод, который дополнительно предварительно заполнен « (###) # ##-#### »

Внутренняя часть вашей формы:

Передняя часть вашей формы:

Пример B:

Теперь, чтобы использовать это для номеров 1-800 с номером телефона, вы можно сделать что-то вроде « 1-(8##)-###-#### », чтобы ваши пользователи знали, что это тип необходимой информации.

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Пример C:

В качестве другого примера предположим, что вы планируете запустить программу информационно-коммуникационных звонков в Австралии. Вам нужно будет собрать телефонные номера, ограниченные этим форматированием, поэтому для этого он будет выглядеть примерно так: « +(##)######### », но вы можете отформатировать его для любой страны. если в другом месте.

Серверная часть вашей формы:

Интерфейсная часть вашей формы:

Так или иначе, мы очень надеемся, что это поможет прояснить все при использовании маскирования ввода.

Не стесняйтесь экспериментировать с этой опцией. Если у вас есть какие-либо предложения, проблемы или вопросы, не стесняйтесь комментировать ниже или опубликовать вопрос на нашем портале поддержки.

Blazor: редакторы данных — маскированный ввод

Обзор

Текстовая маска:

Загрузка маски…

Цифровая маска:

Загрузка маски…

Маска даты и времени:

Загрузка маски. ..

Маска регулярного выражения:

Загрузка маски…

Компонент Masked Input — это текстовый редактор, поддерживающий следующие типы масок:

• Текст
• Цифровой
• Дата-время
• Регулярное выражение

Для получения дополнительной информации о конкретном типе маски см. соответствующий раздел ниже.

Компонент Masked Input также позволяет включать маски на стороне клиента (WebAssembly) в приложениях Blazor Server. В этом режиме редактор обрабатывает вводимый текст на клиенте, чтобы уменьшить задержки ввода при медленном соединении. Дополнительные сведения о том, как активировать режим и его основные принципы, см. в следующем разделе: Оптимизация производительности маски в приложениях Blazor Server.

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

Текстовые маски

Заполнитель:

Сохранить литералы

Загрузка маски…

Телефон:

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

Маскированный ввод активирует текстовую маску, если вы связываете свойство Value компонента со строковым объектом. Чтобы включить этот тип маски в других случаях, установите для свойства MaskMode компонента значение MaskMode.Text.

Поле со списком Placeholder и радиокнопка Save Literals определяют символ-заполнитель и необходимость сохранения литералов в значении редактора соответственно.

Числовые маски

Культура:

Загрузка маски…

Цена: 0

Используйте тип маски Числовой, если вы хотите ограничить ввод числовыми значениями. Для указания маски можно использовать предопределенные шаблоны масок или стандартные числовые форматы .NET. Обратите внимание, что отображаемые значения зависят от текущей культуры. Например, одна и та же маска ввода может определять разные параметры для США и Германии (символ валюты, разделитель тысяч, точность и т. д.).

Маскированный ввод активирует числовой тип маски, если вы привязываете свойство Value компонента к числовому объекту. Чтобы включить этот тип маски в других случаях, установите для свойства MaskMode компонента значение MaskMode.Numeric.

Поле со списком Маска и радиокнопка

Культура определяют шаблон маски и текущую культуру соответственно.

Маски даты и времени

Режим каретки:

Культура:

Загрузка маски…

Дата: 01.11.2022 00:00:00

Тип маски Дата-Время позволяет пользователям вводить значения даты и/или времени. Для указания маски можно использовать предопределенные шаблоны масок или стандартные форматы даты и времени .NET. Обратите внимание, что отображаемые значения зависят от текущей культуры.

Маскированный ввод активирует тип маски даты и времени, если вы привязываете свойство Value компонента к объекту DateTime. Чтобы включить этот тип маски в других сценариях, задайте для параметра MaskMode значение MaskMode.DateTime.

Маска , Режим вставки и Культура задают дополнительные свойства маски.

Маски регулярных выражений

Режим автозаполнения:

Заполнитель:

Заполнители видимые

Загрузка маски. ..

Электронная почта:

Если перечисленные выше типы масок не соответствуют вашим требованиям, вы можете использовать тип маски Регулярное выражение. Синтаксис аналогичен спецификации POSIX ERE.

Чтобы применить этот тип маски к маскированному вводу, задайте для свойства MaskMode компонента значение MaskMode.RegEx.

Параметры Autocomplete Mode , Placeholder и Show Placeholders задают дополнительные свойства маски.

Привязать значение при изменении ввода

Загрузка маски…

Цена: 0

Задайте для свойства BindValueMode значение BindValueMode.OnInput, чтобы немедленно обновлять свойство Value в ответ на вводимые пользователем данные. Вы можете сравнить поведение этой демонстрации с другими модулями. Если этот параметр не включен, редактор обновляет свойство Value только при перемещении фокуса на другой элемент управления.

Кнопка «Очистить» и заполнитель

Загрузка маски…

Задайте для свойства ClearButtonDisplayMode значение Auto , чтобы кнопка Clear отображалась в маскированном вводе, когда он не пуст.

Используйте свойство NullText для отображения замещающего текста в маскированном вводе, когда он пуст.

Формат отображения

Загрузка маски…

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

Маскированный ввод поддерживает стандартные форматы. Дополнительные сведения см. в разделах справки «Строки стандартного числового формата» и «Строки пользовательского числового формата».

Режимы только для чтения и отключенные режимы

Только для чтения

Загрузка маски.

No related posts.