Formatted input with inputMask
inputMask minimizes the chances for the user to input incorrect data. It applies client-side validation with the provided masking template.
How to do it...
A basic example of an input mask for a phone number input would be as follows:
<p:inputMask value="#{inputMaskBean.phone}"
mask="(999) 999-9999"/>As can be seen with the mask (999) 999-9999, it is stated that only numbers can be input along with the parenthesis and dashed structure. The initial visual of the input will be as seen in the following screenshot:
The fields that are filled up with number 9 in the mask will be empty and the rest will be rendered with the initial phase. The character 9 is used to depict only numeric characters that could be input for the field. By providing the alphabetic character a, input could also be restricted to alphabetic characters only. An example would be the input of a product key, as follows:
<p:inputMask value="#{inputMaskBean.productKey}" mask="a999-a9"/>...
