May 29, 2020

How to Format Phone Number in Javascript

By Krishnaa JavaScript Questions 0 Comments

How to Format Phone Number in Javascript

In this video tutorial, you will learn how to format phone number in javascript using cleave.js library.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text">
        <select>
            <option value="US">US</option>
            <option value="GB">GB</option>
            <option value="AU">AU</option>
        </select>
    </div>

    <script src="js/cleave.min.js"></script>
    <script src="js/cleave-phone.i18n.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

</select>

</div>

</body>

</html>

CSS:

body {
    text-align: center;
}

div {
    display: inline-block;
}

input, select {
    display: inline-block;
    padding: 10px 20px;
}

body {

text-align: center;

}

div {

display: inline-block;

}

input, select {

display: inline-block;

padding: 10px 20px;

}

Javascript:

let select = document.querySelector('select');

let cleave = new Cleave('input', {
    phone: true,
    phoneRegionCode:'US'
});

select.addEventListener('change', function () {
    cleave.setPhoneRegionCode(this.value);
    cleave.setRawValue('');
})

let select = document.querySelector('select');

let cleave = new Cleave('input', {

phone: true,

phoneRegionCode:'US'

});

select.addEventListener('change', function () {

cleave.setPhoneRegionCode(this.value);

cleave.setRawValue('');

})

How to Format Phone Number in Javascript

You May Also Like: