Time for action – reading formatted input using InputMask

Let's look at how to get phone number input in the 999-999-9999? (Ext:9999) format using the InputMask component:

1. Create a form with a Phone input field to read a phone number in the 999-999-9999? (Ext:9999) format, by using the following code:

   <h:form id="form1">
       <p:panel header="My Account">  
           <h:panelGrid columns="2">  
               <p:outputLabel for="phone" value="Phone"/>
               <p:inputMask id="phone" value="#{userController.loginUser.phone}" mask="999-999-9999? (Ext:9999)" placeHolder="X"/>  
           </h:panelGrid>  
       </p:panel>  
   </h:form>

What just happened?

We have used the <p:inputMask> component to read a phone number in the 999-999-9999 format. To set the extension number as optional, we have mentioned the extension part after the ? symbol. As we have set the placeholder to X, when you put the cursor in the Phone input field, the mask is displayed as...