function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sanchi9Sanchi9 

Format phone number entered

How to format phone number as 123-123-1234 when entered in a lightning input? 
 
Best Answer chosen by Sanchi9
CharuDuttCharuDutt
Hii Priya 
Try Below Code 
LWC
<lightning-input 
           type="text" 
           maxlength="10" 
           onblur={formatPhoneNumber} 
           value={PhnValue} 
           name="Phone">
 </lightning-input>

JS
formatPhoneNumber(event){
        var phoneNumber = event.target.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];
        this.PhnValue=formattedPhone;
    }
 --------------------------------------------------------- 
AURA 
<lightning:input type="text" maxlength="10" onblur = "{!c.formatPhoneNumber}" aura:id="Phone" label="Phone" name="Phone"/>

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);
    }
Please Mark It As Best Answer If It Helps
Thank You!
 

All Answers

Suraj Tripathi 47Suraj Tripathi 47

Hi Priya

Try this :
 

<template>
    <lightning-input type="tel"
                     label="Telephone"
                     value="343-343-3434"
                     pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
    </lightning-input>
</template>


Please mark it as Best Answer, if it helps.

Thanks
CharuDuttCharuDutt
Hii Priya 
Try Below Code 
LWC
<lightning-input 
           type="text" 
           maxlength="10" 
           onblur={formatPhoneNumber} 
           value={PhnValue} 
           name="Phone">
 </lightning-input>

JS
formatPhoneNumber(event){
        var phoneNumber = event.target.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];
        this.PhnValue=formattedPhone;
    }
 --------------------------------------------------------- 
AURA 
<lightning:input type="text" maxlength="10" onblur = "{!c.formatPhoneNumber}" aura:id="Phone" label="Phone" name="Phone"/>

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);
    }
Please Mark It As Best Answer If It Helps
Thank You!
 
This was selected as the best answer
mukesh guptamukesh gupta
Hi Priya,

Please use this Tested code:-

User-added image
  
<aura:component>
    <lightning:input type="tel" label="Phone field with pattern matching" name="phone3" value="123-123-1234" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>
 
</aura:component>
if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh