Байки от Игоря Чернова, деда на печи. Эпизод 2:Как дед маску сорвал с Т-Банка, или Секрет уральского пчеловода.

Уважаемая поддержка Т-Банка, передайте этот листок вашему главному по тарелочкам во фронтенд-отделе. Пусть примет к сведению, а то у вас клиенты опять с печи падают от удивления

Сидят, значит, ваши программисты прямо в модной серверной и среди мигающих лампочек растопили настоящий самовар. Дым от него идёт столбом прямо в вентиляцию! Главный архитектор старым дедовским сапогом усердно раздувает угли, младший программист охапками дрова подносит, а средний на коленках ползает и сухие щепки подкладывает. Мало того — они там же развели костёр прямо на кафельном полу и вовсю жарят шашлык, переворачивая шампуры под шумок вентиляторов охлаждения. Всё у них по графику, пир идёт горой, системы работают сами по себе.

И тут к ним в этот дым заглядывает дед Игорь — прямо с уральской пасеки, в своем рабочем комбинезоне и с дедовским костылем.

— Здорово, мастера шашлычных и компьютерных дел! — кашляет дед в дыму. — Нашёл я тут у вас одну небольшую заминку. Решил соседу за сотовый перевести, нажал на поле ввода, выбрал сохранённый номер из памяти браузера, а ваш сайт мне красным текстом пишет: «Поле заполнено неправильно». У вас там маска ввода телефона, похоже, немного запуталась при автозаполнении, пока вы тут баклуши бьёте.

Разработчики удивились, побросали дрова и открыли блокноты:

— Дедушка, да у нас же современное автозаполнение! Браузер сам номера подставляет, чтобы пользователям удобно было. Мы его на нейросетях тренировали!

Дед Игорь вежливо, но уверенно стукнул костылем по полу:

— Удобно-то удобно, да не совсем. Когда человек номер из памяти автозаполнения выбирает или из буфера обмена вставляет, у вас префикс «+7» накладывается на вашу же внутреннюю «восьмерку». В итоге номер получается слишком длинным. Ваша строгая маска ввода пугается лишней цифры и выдает ошибку. Обработчик события вставки просто не очищает строку перед тем, как применить маску.

Я вот за 9 вечеров после пасеки — когда наш домашний паучок, который нам с внуком сказки на ночь рассказывает, спустившись по тонкой паутинке прямо к уху, всю эту логику мне во сне и наткал — код проверил и нашёл, как это исправить. Пока вы тут сервера от копоти и дыма железной щёткой не очистите и половой тряпкой оперативную память от жирных шашлычных брызг не помоете, ничего у вас само не заработает! А то натренировали они нейросети, а простую сибирскую «восьмёрку» за хвост поймать не можете!

Программисты от удивления чуть блокноты в костёр не выронили. А дед берет уголёк прямо из самовара и пишет им на чистой салфетке готовый и аккуратный код-фикс, чтобы «восьмерки» при автозаполнении больше не ломали форму:

/** * САНИТАЙЗЕР ДЛЯ ПОЛЯ ВВОДА ТЕЛЕФОНА * Корректирует наложение префиксов (+7 / 8) при автозаполнении * и вставке (onPaste) из памяти браузера. */ function handlePhonePaste(event) { // 1. Перехватываем текст в момент вставки или автозаполнения let pastedData = ''; if (event.clipboardData) { pastedData = event.clipboardData.getData('text'); } else if (window.clipboardData) { pastedData = window.clipboardData.getData('text'); } else { pastedData = event.target.value; }

// 2. Очищаем строку: оставляем только чистые цифры let cleanNumber = pastedData.replace(/\D/g, '');

// 3. Если в начале прилетела лишняя 7 или 8 (код страны), аккуратно убираем её if (cleanNumber.length > 10 && (cleanNumber.startsWith('7') || cleanNumber.startsWith('8'))) { cleanNumber = cleanNumber.substring(1); // Оставляем ровно 10 цифр самого номера }

// 4. Передаем очищенный номер в маску Т-Банка if (cleanNumber.length <= 10) { updatePhoneInputValue(cleanNumber); console.log('Номер успешно очищен и подготовлен для маски.'); } }

// Подключаем проверку к полю ввода телефона const phoneInput = document.querySelector('input[type="tel"]'); if (phoneInput) { phoneInput.addEventListener('paste', handlePhonePaste); phoneInput.addEventListener('input', handlePhonePaste); // Фиксируем автозаполнение }

— Вот вам готовый скрипт, все остальные восемь приняты на "ура", правда никто спасибо не говорит, гордые наверное или хитрые, — грустно улыбнулся дед Игорь. — Ну ладно, неблагодарные сверчки эти программисты. Вкатите хоть это в свой репозиторий, пока мёд не засахарился. Чтобы в следующий раз, когда уральский пчеловод номер из памяти вставит, всё за долю секунды парсилось без ваших этих «некорректных полей». А я пошел к ульям, некогда мне тут с вашими масками нянчиться! Удачи в оптимизации, чаевники!