JSFiddle - React, Tailwind, and code Playground

by dexygen

HTML

<input type="text" id="phone"/>

JavaScript

let phone = document.getElementById('phone');

phone.addEventListener('click', maskPhone);
phone.addEventListener('focus', maskPhone);
phone.addEventListener('mousedown', maskPhone);

let previous;

function maskPhone(evt) {
    let target = evt.target;
    let value = target.value;
    let digitCode;
    let digitPos;
    
    if (evt.type === 'focus' || evt.type === 'click') {
        if (value.trim().length === 0) {
            target.value = "(   )   -    ";
            setTimeout(() => {target.setSelectionRange(1,1)}, 50);
        }
        else {
            setTimeout(() => { //what if at end?
                target.setSelectionRange(value.indexOf(' '), value.indexOf(' '));
            }, 50);
        }
    }
    else { //mousedown
        
        digitCode = evt.code.match(/^Digit(\d)$/);
        if (digitCode) {
            digitCode = digitCode[1];
            digitPos = value.lastIndexOf(digitCode);
            alert(value.substr(digitPos));
        }
    }
}