PrimeFaces InputMask组件使用详解

本文概述

  • InputMask属性
  • 例子
这是一种特殊的输入框, 它强制用户输入格式化的输入。我们可以使用< p:inputMask> 组件创建它。它以特定模式接受输入。当我们想要格式化用户输入时, 这很有用。它具有下面列出的各种属性。
InputMask属性
Attribute 默认值 Return type Description
id null String 它是组件的唯一标识符。
rendered true Boolean 它用于指定组件的呈现。
mask null Object 用于设置遮罩模板。
slotChar null String 它是蒙版模板中的placeHolder。
value null object 用于设置组件的值。
required false Boolean 用于根据需要制作组件。
maxlength null Integer 它用于设置可以在此字段中输入的最大字符数。
onblur null String 当输入元素失去焦点时, 用于调用脚本。
onselect null String 用户选择输入元素中的文本时, 用于执行脚本。
placeholder null String 它用于指定简短提示。
readonly false Boolean 它用于将组件设置为只读。
size null Integer 它用于设置用于确定输入元素宽度的字符数。
autoClear true Boolean 输入不完整的输入时, 用于清除模糊区域。
例子 在这里, 在下面的示例中, 我们正在实现< p:inpuMask> 组件。本示例包含以下文件。
JSF文件
// inputMask.xhtml
< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"> < h:head> < title> input-mask< /title> < /h:head> < h:body> < h:form> < h:panelGrid columns="2" cellpadding="5"> < p:outputLabel for="date" value="http://www.srcmini.com/Date:" /> < p:inputMask id="date" value="http://www.srcmini.com/#{inputMask.date}" mask="99/99/9999"/> < p:outputLabel for="phone" value="http://www.srcmini.com/Phone:" /> < p:inputMask id="phone" value="http://www.srcmini.com/#{inputMask.phone}" mask="(999) 999-9999"/> < p:commandButton value="http://www.srcmini.com/Submit" oncomplete="PF('dlg').show()"/> < p:commandButton value="http://www.srcmini.com/Reset" type="reset" /> < /h:panelGrid> < /h:form> < /h:body> < /html>

ManagedBean
// InputMask.java
package com.srcmini; import javax.faces.bean.ManagedBean; @ManagedBeanpublic class InputMask {private String date; private String phone; public String getDate() {return date; }public void setDate(String date) {this.date = date; }public String getPhone() {return phone; }public void setPhone(String phone) {this.phone = phone; }}

【PrimeFaces InputMask组件使用详解】输出
PrimeFaces InputMask组件使用详解

文章图片
PrimeFaces InputMask组件使用详解

文章图片

    推荐阅读