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 input mask for a phone number input would be as follows:
<p:inputMask value="#{maskController.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 image:
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 numeric character 9 is used to depict only numeric characters that could be input for the field in this example. By providing alphabetic character a, input could be restricted only to alphabetic characters. An example would be the input of a product key, as follows:
<p:inputMask value="#{maskController.productKey}" mask="a999...
