Tag Archives: USA Standard Telephone

USA Standard Telephone Formatting in Lightning Experience

I had a requirement to automate a Phone number field to USA standard format. As of now in Lightning there is no such feature exists.

Here is an example:
Phone: 9831078379
USA Standard Format: (983) 107-8379

Component:

<aura:component>
    <div class="slds-m-around_xx-large">
        <lightning:input type="text" maxlength="10" onblur = "{!c.formatPhoneNumber}" aura:id="Phone" label="Phone" name="Phone"/>
    </div>
</aura:component>

JS Controller:

({
    formatPhoneNumber: function(component, helper, event) {
        var phoneNo = component.find("Phone");
        var phoneNumber = phoneNo.get('v.value');
        var s = (""+phoneNumber).replace(/\D/g, '');
        var m = s.match(/^(\d{3})(\d{3})(\d{4})$/);
        var formattedPhone = (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
        phoneNo.set('v.value',formattedPhone);
    }
})

Output:
USA-Standard-Phone-Format-in-Lightning-Experience