Sobes.tech
Назад к задачам
Junior — Senior
47

Автоматическое приведение ввода к телефонному формату

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Создайте React‑компонент PhoneNumberInput, который будет динамически преобразовывать вводимые символы в поле ввода в привычный вид телефонного номера, например +7 (___) ___--. При наборе пользователь видит уже отформатированный номер, без необходимости вручную вставлять скобки, пробелы или дефисы.

import "./styles.css";
import { PhoneNumberInput } from "./Input";

export default function App() {
  return (
    <div className="App">
      <div>Input</div>
      <PhoneNumberInput />
      <br />
      <br />
      <div>Your Input</div>
    </div>
  );
}

Задача подразумевает обработку событий ввода, работу с курсором и поддержание корректного формата в реальном времени.