Как сделать onChange валидацию номера телефона на React?

Question

[Togar]

Подскажите как сделать onChange валидацию номера телефона, чтобы она работала так:
пользователь постепенно вводит строку, а она автоматически формарируется как номер телефона:

1111 => +1 (111)
00000000000 => +0 (000) 000 00 00

Answer 1

[Kirill Makarov]

Гугли реакт инпут маск или подобные ей библиотеки

Comments

[Togar]

очень не хотелось бы добавлять новые зависимости в проект(

Answer 2

[Gradient1712]

Стоит взглянуть на библиотеку Cleave.js

Comments

[Togar]

тоже новая зависимость, получается

Answer 3

[shsv382]

На чистом JS

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);

Comments

[Togar]

спасибо за решение без библиотек!
запустил код, заметил, что
- он позволяет вводить буквы, что плохо
- при изменении маски номера (например без минусов между number21 и number22) - придется сильно переписывать код, страдает гибкость

[shsv382]

Togar, добавь перед выводом строку
if(!content.length) e.target.value = '';

проверил на CodePen, работает

[shsv382]

Togar, по поводу маски мне сложно понять, но как вариант можно сделать несколько шаблонов. Да и в принципе это все можно упаковать в реакт-компонент со своим state, так даже проще будет.

зы: давно просто хотел эту фишку реализовать, а тут твой вопрос - как повод потренироваться немного )))