JSFiddle - React, Tailwind, and code Playground

by dgrebb

HTML

<input class="input" type="text" value="" />

JavaScript

var field = document.querySelector('.input');
const normalizePhone = (value, previousValue) => {
  if (!value) {
    return value;
  }
  const onlyNums = value.replace(/[^\d]/g, '');

  if (!previousValue || value.length > previousValue.length) {
    // typing forward
    if (onlyNums.length === 3) {
      return `(${onlyNums}) `;
    }
    if (onlyNums.length === 6) {
      return `(${onlyNums.slice(0, 3)}) ${onlyNums.slice(3)}-`;
    }
  }
  if (onlyNums.length <= 3) {
    return onlyNums;
  }
  if (onlyNums.length <= 6) {
    return `(${onlyNums.slice(0, 3)}) ${onlyNums.slice(3)}`;
  }
  return `(${onlyNums.slice(0, 3)}) ${onlyNums.slice(3, 6)}-${onlyNums.slice(6, 10)}`;
};

document.addEventListener('input', function (evt) {
  alert('change');
});