Auto Masked / Format Phone number as per given country phone format | JavaScript | LWC

In this blog we will give you simple JavaScript code which used to format phone number as per given country phone format . Suppose that you have input field for phone number and you want auto format that phone number as a user type to your given phone Format / Masked , then this tutorial will help you to solve your issue with simple JavaScript , without using any Library / Plugin.

Here we are using custom format but as per your need your can create a format for all countries or you can use ITI plugin which provide all basic information about countries telephone numbers , here I have blog for how to use ITI in LWC .

We will need input box where user can enter phone number , I am using lighting input , but you can use simple HTML input as well.

<template>
    <div class="slds-m-left_xx-large">
        <div class="slds-size_1-of-2">
            <lightning-input label="Enter Phone Number" placeholder={placeHolder}  value={phoneNumberEntered} onkeydown={handlePhoneChange} maxlength={formatLen}></lightning-input>
        </div>
    </div>
</template>

On our input box we have onkeydown={handlePhoneChange} event which takes care of validating phone number as user types.

import { LightningElement, track} from 'lwc';

export default class MaskedPhoneNumber extends LightningElement {
    indiaFormat = '12345 67890';
    USFormat = '(000) 123-4567'
    placeHolder = this.indiaFormat
    @track formatLen = this.placeHolder.length
    @track phoneNumberEntered = '';

    handlePhoneChange(event) {
        let getIndexOfSpecialChar = [];
        let getactualSpecialChar = [];

         for (let i = 0; i < this.placeHolder.length; i++) {
             if(this.placeHolder[i] == ' ' || this.placeHolder[i] == '(' || this.placeHolder[i] == ')' 
             || this.placeHolder[i] == '-' ) {
                getIndexOfSpecialChar.push(i); 
                getactualSpecialChar.push(this.placeHolder[i]); 
             }
           }
           []
       let len = event.target.value.length;
       let  backspace= event.keyCode;
       if(backspace == 8 ) {
         len = len-1;
        }else {
         len = event.target.value.length
        }
        let eventTargetValue = event.target.value
       for(let i = 0;i < this.placeHolder.length; i++){
         if(len == getIndexOfSpecialChar[i]) {
             this.phoneNumberEntered = eventTargetValue + getactualSpecialChar[i];
             if(this.phoneNumberEntered.length == getIndexOfSpecialChar[i+1]) {
                 this.phoneNumberEntered = this.phoneNumberEntered + getactualSpecialChar[i+1];
             }
         }
       }
     }
}

Our final phone number as stored in phoneNumberEntered variable , watch the following Youtube video to understand how this JavaScript Code works .