Posted: 22 Mar 2016 19:48 EDT Last activity: 1 Dec 2016 6:43 EST
How to format a phone number as user types?
How to format a phone number in the format (xxx) xxx-xxxx as the user types in the number? Please find the reference to the requirement in the link https://www.lyft.com/signup. Check the Phone number input field in the web page.
We referred to the Edit Input in the Phone number property. On the UI, we configured the text input field to "Post Value" on any key.
Now, the formatting is working fine, but the placement of the cursor as the user types is improper. i.e. if we are trying to enter 1234567890 in the same sequence, it shows (234) 789-0651 instead of (123) 456-7890. The reason is that after we type x characters, the cursor is at the character x, irrespective of the string's length in the input box. i.e. when we type 1 character "1", the string is formatted to "(1", but since the number of characters typed is 1, the cursor is after the '(' and whatever the user types appears between '(' and '1'.
Similarly, this is where the cursor is after the user typed 4 characters.
Please let us know if there is a way we can control the cursor, Or if there is any other way to achieve the formatting of the phone number.
Go to the Target Property-> In the Advance Tab of the Property you will find Edit Input -> This field Will Use Edit Input Rule, Create A New rule Edit Input with some Name Example "FormatInputAsPhone" -> Once you Open the Edit Inpute Rule you will see the Java Tab -> In the Java Tab Just Copy and Paste the Below mentioned code And Save it.
Once the rule is created refer this "EditInpute Rule" in the Property Save it. And Refer tie in the Section.
Once you Enter the Number there it will show the same functionality as given in the Link whihc you have provided.
In the Edit Input you can Use the below mentioned code for phone format (xxx) xxx-xxxx :-