3.5.2.1.27. 掩码字段

在线示例

API 文档

这是一个文本字段控件,其中的数据以预定义格式输入。例如,使用 MaskedField 输入电话号码很方便。

该组件对应的 XML 名称: maskedField

MaskedField 基本上复制了 TextField 的功能,但是不能为掩码字段设置 datatype。因此,MaskedField 仅适用于 String 类型的文本和实体属性。MaskedField 具有以下特定属性:

  • mask – 为字段设置掩码。要设置掩码,请使用以下字符:

    • # – 数字

    • U – 大写字母

    • L – 小写字母

    • ? – 字母

    • А – 字母或数字

    • * – 任何字符

    • H – 大写十六进制字符

    • h – 小写十六进制字符

    • ~ – “ +” 或者 “-“ 字符

  • valueMode – 定义返回值的格式(带掩码或不带掩码),可以使用 maskedclear 作为值。

下面提供了带有用于输入电话号码的掩码的文本字段示例:

  1. <maskedField id="phoneNumberField" mask="(###)###-##-##" valueMode="masked"/>
  2. <button id="showPhoneNumberBtn" caption="msg://showPhoneNumberBtn"/>
  1. @Inject
  2. private MaskedField phoneNumberField;
  3. @Inject
  4. private Notifications notifications;
  5. @Subscribe("showPhoneNumberBtn")
  6. protected void onShowPhoneNumberBtnClick(Button.ClickEvent event) {
  7. notifications.create()
  8. .withCaption((String) phoneNumberField.getValue())
  9. .withType(Notifications.NotificationType.HUMANIZED)
  10. .show();
  11. }

gui MaskedField

gui MaskedField maskedValueMode


maskedField 的属性

align - caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - description - descriptionAsHtml - editable - enable - box.expandRatio - height - icon - id - mask - maxLength - property - required - requiredMessage - stylename - tabIndex - trim - valueMode - visible - width

maskedField 的元素

validator

API

addEnterPressListener - addValueChangeListener - setContextHelpIconClickHandler