JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<label for="tel-inp">+7 </label><input type="tel" name="phone" placeholder="(999)123-45-67" id="tel-inp">

JavaScript

document.getElementById('tel-inp').addEventListener('input', (e) => {
  let x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ')' + x[2] + '-' + x[3] : '') + (x[4] ? '-' + x[4] : '');
});