shsv382

<input type="number" class="counter" />
  <div class="symbols-wrapper">
    <div class="symbols-hidden"></div>
    <div class="symbols" contenteditable="true">12345abc</div>
  </div>

.symbols-wrapper {
  position: relative;
  width: 220px;
  height: 120px;
}

.symbols {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.symbols-hidden {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: transparent;
}

.symbols, .symbols-hidden {
  border: none;
  padding: 2px;
  width: 220px;
  height: 120px;
}

const text = document.querySelector('.symbols')
const hiddenText = document.querySelector('.symbols-hidden')

text.addEventListener('input', () => {
  const counter = document.querySelector('.counter');

  // сохраняем текст разрешенной длины
  let validText = text.outerText.substring(0, Number(counter.value))

  // сохраняем остальной текст
  let invalidText = text.outerText.substring(Number(counter.value));

  // обнуляем красный span
  hiddenText.innerHTML = ""

  // добавляем белый span
  let span1 = document.createElement('span');
  span1.style.background = "";
  span1.innerHTML = validText;

  // если длина больше указанной в ограничителе, то добавляем красный span
  if (invalidText.length > 0) {
    let span2 = document.createElement('span');
    span2.style.background = "rgba(252, 100, 59, 0.4)";
    span2.innerHTML = invalidText;
    hiddenText.innerHTML = span1.outerHTML + span2.outerHTML;
  } else {
    hiddenText.innerHTML = span1.outerHTML;
  }
  
})

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

const phoneFormat = function(e) {
  let content = e.target.value;
  if(!content) return;
  content = Array.from(content).filter(ltr => ltr.charCodeAt(0) > 47 && ltr.charCodeAt(0) < 58);
  
  switch(content[0]) {
    case "8":
      content[0] = "7";
      break;
    case "9":
      content.unshift("7");
      break;
    default:
      break;
  }
  
  let [countryCode, operatorCode, number3, number21, number22] = [
                                                                  content[0], 
                                                                  content.slice(1,4).join(''), 
                                                                  content.slice(4,7).join(''),
                                                                  content.slice(7,9).join(''),
                                                                  content.slice(9,11).join(''),
                                                                 ]

  e.target.value = countryCode.length ? `+${countryCode}` : '';
  if(operatorCode.length) e.target.value += `(${operatorCode}`;
  if(number3.length) e.target.value += `)${number3}`;
  if(number21.length) e.target.value += `-${number21}`;
  if(number22.length) e.target.value += `-${number22}`;
}

phone.oninput = (e) => phoneFormat(e);