Masked Input for JSF

PrimeFaces 0.9.1 introduced a very handy component that forces an input to fit in a defined mask as input is being typed. Mask definition is generic so you can define any format you want. Following are just a couple of examples.

<h:outputText value="Date: " />
<p:inputMask value="# {}" mask="99/99/9999"/>

<h:outputText value="Phone: " />
<p:inputMask value="# {}" mask="(999) 999-9999"/>

<h:outputText value="Phone with Ext: " />
<p:inputMask value="# {maskController.phoneExt}" mask="(999) 999-9999? x99999"/>

<h:outputText value="taxId: " />
<p:inputMask value="# {maskController.taxId}" mask="99-9999999"/>

<h:outputText value="SSN: " />
<p:inputMask value="# {maskController.ssn}" mask="999-99-9999"/>

<h:outputText value="Product Key: " />
<p:inputMask value="# {maskController.productKey}" mask="a*-999-a999"/>

The output of this example would be;


You can try the inputMask on the prime showcase application that’s available online.

One Response to Masked Input for JSF

%d bloggers like this: