Auto Format North American Phone Numbers in HTML Forms using Vanilla JS

autophone.js

document.addEventListener('DOMContentLoaded', function() {
    let tels = document.querySelectorAll('input[type=tel]');
    tels.forEach(function (tel) {
        if (tel) {
            tel.addEventListener('change', function () {
                let inputField = this
                inputField.value = formatPhoneNumber(inputField.value);
            });
            tel.addEventListener('keyup', function () {
                let inputField = this
                inputField.value = formatPhoneNumber(inputField.value);
            });
        }
    })
}, false);

window.formatPhoneNumber = function (value) {
    if (!value) return value;
    const phoneNumber = value.replace(/[^\d]/g, '');
    const phoneNumberLength = phoneNumber.length;
    if (phoneNumberLength < 4) return phoneNumber;
    if (phoneNumberLength < 7) {
        return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
    }
    return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
        3,
        6
    )}-${phoneNumber.slice(6, 10)}`;
}