Question
Cognizant Technology Solutions
US
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.
Cognizant Technology Solutions
US
Here is what we tried:
We created an Edit Input rule FormatPhoneNumber.
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.
Here is what we tried:
We created an Edit Input rule FormatPhoneNumber.
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.
Updated: 23 Mar 2016 13:34 EDT
GovCIO
US
Hello Ravikanth,
I saw there was a post on converting the phone number into xxx-xxx-xxxx using below code in R-E-Input. Just explore more on this.
************************************************
String phFormat = theValue;
if (phFormat.length() > 0)
{
phFormat = phFormat.replaceAll("[^\\d]","");
if(phFormat.length() == 10)
{
phFormat = phFormat.substring(0,3) + "-" + phFormat.substring(3,6) + "-" + phFormat.substring(6);
theValue = phFormat;
}
}
**************************************************
Also, check the below forum to get more ideas on this requirement if the above doesn't work.
http://stackoverflow.com/questions/123559/a-comprehensive-regex-for-phone-number-validation
Thanks,
Ravi Kumar.
BlueRose Technologies
AU
Use below code as edit input rule
String PhoneActualVal = theValue;
//get Active Property String value
// Removing Ascii Characters from the input field
if(PhoneActualVal!=null && (PhoneActualVal.indexOf("(")!=-1 || PhoneActualVal.indexOf(")")!=-1)){
PhoneActualVal=PhoneActualVal.replaceAll("(","");
PhoneActualVal=PhoneActualVal.replaceAll(")","");
}
//Remove non numeric characters from String
StringBuffer bufOutputString = new StringBuffer(PhoneActualVal);
StringBuffer bufNewOutputString = new StringBuffer();
for (int i = 0; i < bufOutputString.length(); i++) {
if (Character.isDigit(bufOutputString.charAt(i))) {
bufNewOutputString.append(bufOutputString.charAt(i));
}
}
PhoneActualVal = bufNewOutputString.toString();
//set value on property
if(PhoneActualVal.length()=<10){
theValue = "("+PhoneActualVal.substring(0,3)+") "+PhoneActualVal.substring(3,6)+"-"+PhoneActualVal.substring(6);}
EvonSys
IN
Hi
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 :-
[
if ((theValue.length() == 10))
{
String str=theValue;
String str1=str.substring(0, 3);
str1="("+str1+")";
String str2=str.substring(3, 6);
str2 = " "+str2 +"-";
String str3=str.substring(6, 10);
String s3=str1+str2+str3;
theValue=s3;
}
] // Remove the [] braces
Thanks
Harsh
Incessant Technologies
IN
Hi RaviKanth,
In Section, on Phone number property, I have configured SetValue Action by setting same value (.PhoneNumber == .PhoneNumber) and it solved this cursor problem.
Screenshots
Regards
Swathi