Primefaces Inputmask

by Online Tutorials Library July 14, 2022

PrimeFaces InputMask

It is a special type of input box which forces user to enter formatted input. We can create it by using <p:inputMask> component. It takes input in a certain pattern. It is useful when we want formated user input. It has various attributes that are listed below.

InputMask Attributes

Attribute	Default Value	Return type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It is used to specify the rendering of the component.
mask	null	Object	It is used to set mask template.
slotChar	null	String	It is a placeHolder in mask template.
value	null	object	It is used to set value of the component.
required	false	Boolean	It is used to make component as required.
maxlength	null	Integer	It is used to set maximum number of characters that may be entered in this field.
onblur	null	String	It is used to call script when input element loses focus.
onselect	null	String	It is used to execute script when text within input element is selected by user.
placeholder	null	String	It is used to specify a short hint.
readonly	false	Boolean	It is used to set component readonly.
size	null	Integer	It is used to set number of characters used to determine the width of the input element.
autoClear	true	Boolean	It is used to clear the field on blur when incomplete input is entered.

Example

Here, in the following example, we are implementing <p:inpuMask> component. This example contains the following files.

JSF File

// 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=”Date: ” />  <p:inputMask id=”date” value=”#{inputMask.date}” mask=”99/99/9999″/>  <p:outputLabel for=”phone” value=”Phone:” />  <p:inputMask id=”phone” value=”#{inputMask.phone}” mask=”(999) 999-9999″/>  <p:commandButton value=”Submit” oncomplete=”PF(‘dlg’).show()”/>  <p:commandButton value=”Reset” type=”reset” />  </h:panelGrid>  </h:form>  </h:body>  </html>  

ManagedBean

// InputMask.java

  package com.tutoraspire;  import javax.faces.bean.ManagedBean;  @ManagedBean  public 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;  }  }  

Output:

Primefaces Inputmask 1
Primefaces Inputmask 2

Next TopicPrimeFaces SelectOneListbox

Primefaces Inputmask

PrimeFaces InputMask

InputMask Attributes

Example

JSF File

ManagedBean

SSRS vs Power BI

Backtracking in Prolog

You may also like