Делаем ПРАВИЛЬНУЮ маску ввода телефона. Бомбит от кривых UX! OZON, М.Видео, WildBerries - ну вы чо?!
Vložit
- čas přidán 11. 07. 2024
- Мой курс «Хардкорная веб-разработка» - course.to.digital
Книжный клуб Ботаним!, где мы читаем хорошие ИТ-книги: botanim.to.digital/
Telegram: t0digital.t.me
Сказать спасибо за это видео можно здесь - boosty.to/digitalize.team
Я долго терпел, серьёзно. Вводишь на сайте телефон, маска в поле его ломает, пытаешься поправить, становится хуже, плюёшь и удаляешь всё, вводя заново. На одном сайте, на втором, на третьем. Однажды захотелось узнать масштаб проблемы - изучил, узнал. OZON, М.Видео, WildBerries, Тинькофф - похоже, что никто не может сделать себе адекватную маску ввода номера телефона. Что ж, вопрос сурьёзный, проведём пару митапов, организуем конф колл на 12 человек и переписку на 18, привлечём на решение проблемы инвестиции, лучших специалистов, подключим биг дату и искуcственный интеллект... и, наконец, напишем, чёрт её дери, свою маску.
Результат - phoneinput.to.digital/
Исходники - github.com/alexey-goloburdin/...
0:00 Есть проблема
3:50 Реализация в maskedinput плагине
8:37 Реализация в OZON
12:55 Реализация в WildBerries
15:01 Реализация в М.Видео
16:35 Реализация на лендосе Тинькофф
17:15 Неплохая реализация в Тинькофф Бизнес
19:25 Пишем свой input ввода телефона
/****************** about ******************/
Меня зовут Алексей Голобурдин, я программирую с 2004 года и на этом канале делюсь своим опытом. Я основатель и руководитель компаний:
- Диджитализируй digitalize.team, разрабатываем сложные IT системы для бизнеса;
- Salesbeat salesbeat.pro, комплексный модуль доставки для интернет магазинов.
Если у вас есть проект на разработку, пишите нам на hi@digitalize.team.
С другими предложениями, а также если вам нужна одна или несколько индивидуальных консультаций/уроков по разработке (3000 руб/час), пишите мне на alexey@salesbeat.pro.
Telegram канал - t.me/t0digital
ВК - digitalize.team
RuTube - rutube.ru/channel/24802975/ab...
Дзен - dzen.ru/id/6235d32cb64df01e6e...
"я буду использовать старый синтаксис JS чтобы была лучшая совместимость со старыми браузерами"
let phone....
Directed by Robert B. Weide
Yep:)
Вы не понимаете, это другое
И вроде у includes 95% поддержка, что вроде как дофига.
5% на большом трафике равно куча денег
Есть бабель, не надо было вообще на этом внимание акцентировать)
@@s_plus_e вот именно)
Вакансия: требуется специалист по маскам ввода уровня сеньор. Наличие диплома от "Диджитализируй Академи" обязательно!
Шел 2021 год... начало бомбить даже от масок ввода телефона
У меня металлический лифт изнутри покрасили краской , (ИЗНУТРИ / ЛИФТ / МЕТАЛЛ / КРАСКА) , о каких масках ввода мы говорим . P.S : г. Москва, сотрудники сил****х структур скоро копьями будут квадрокоптеры, западного врага, сбивать , о каких маска, какое IT, Вы дорогие граждане о чем?
Меня бомбит что нужно вообще номер телефона использовать
@@alexanderash4760 скорее квадрокоптеры в Москве будут копьями народ избивать
Тестировщики озон м.видео и wildberries : 🗿
Класс! Долго думал как лучше сделать а тут такое чудесное видео, 5 минут и маска на сайте! Спасибо!
отличный видос! особенно классно что пишешь и проговариваешь что пишешь.... Я учусь по таким видосам.)
Дорогой и приятнейший человек, ты мой спаситель, ty a lot, сколько статей я не прочел - и близко нет такой реализации - спасибо!
Хз что у тех компаний что ты смотрел, но есть большая проблема в маске.
В разных странах код страны свой. Работаю на проекте где есть ввод номеров для сотрудников по всему миру. Мы не используем замену на +7(9 если пишешь девятку, потому что девятка, это начало кода десятка стран (если верно помню). Длинна номера тоже разная
Проблема не так проста как кажется
Вот это правильный коммент
У вас есть проверка на минимальное и максимальное количество цифр в номере? Если не сложно, то можешь просто паттерн для проверки телефона скинуть?
Я такой использую ^(\s+)?\+?\d{10,}(\s+)?$
Как мне кажется, он максимально лояльный для ввода
Привет, ищу более менее готовые решения. Может есть чего?)
Он использует маску восновном для росийских номеров. И хочет, чтоб работало такое условие, при котором номера не из рашки тоже можно было писать и маска их не ломала.
А в вашем случае хорошо-бы использовать что-то похожее на ввод номера в телеграм с выбором кода страны и использованием отдельной маски для каждой отдельной страны.
Имхо. В случаях, когда ваши юзеры могут быть из рызных стран, удобнее организовывать ввод номера телефона через два поля: код (с визуализацией - флагом страны) и непосредственно самим номером. На номер тогда уже можно вешать актуальную маску.
Я бы взял коды не +7 и 8, а +79 и 89 для однозначного детекта мобильных РФ номеров. Иначе начинаются проблемы с Казахстаном +77. По первой 9 очень много стран кроме РФ, по которым будет ошибка ru.wikipedia.org/wiki/Телефонные_коды_стран#Зона_9
ожидал увидеть что-то мегакрутое в одну строку) спасибо за реальный код
Жиза с этими масками
Благодарю! Отлично объяснил.
Это прям моя боль. всегда удивлялся этому
С другой стороны, передо мной такой задачи не стояло
Шикарная маска! Идеально подходит под все задачи на моих проектах
Не зная js, и то было интересно смотреть и немного понятно ( как минимум логика) :) , хотя только осваиваю синтаксис питончика. 👍
А тут и js то современного то и нет:)
14:40 этот вариант лучше до тех пор пока не напишешь не 912 вместо 902, а например 9002 вместо 902)
Это уже на откупе человека. При желании сломать маску её всегда можно сломать, банально отключив js
Именно поэтому никакие скобки и дефисы не нужны. А то есть регионы, даже в Московской области, где код региона 4 или 5-ти значный. И тут уже никакая маска не поможет, надо целый справочник для валидации :D
Самое главное не показали, как это автотестами обложить, чтобы не ручками каждый раз все кейсы проверять, но всё равно спасибо за полезное видео.
Скользкую тему затронул) Чтобы сделать универсальную телефонную маску, придется учесть огромное количество кейсов. И почти всегда ее можно будет сломать при вводе телефона какой-нибудь страны третьего мира xD
Топ формат, просто по фактам их разложил, респект тебе
Спасибо, дружище! Как всегда классный контент. Но по сути - если формой попытается воспользоваться например китаец или вьетнамец, у которых номера начинаются с +8? Облом, однако. Турок с его +90 тоже зарегиться и купить макбук за 500тыр не сможет. Вообще, считаю что восьмёрку давно пора отправить на свалку истории. Инпуты, которые заставляют юзера отвыкать от восьмёрки и писать номер с + приближают наступление светлого будущего. Тем более, что на бэке всё-равно нужно будет номера хранить в международном формате для интеграции с SMS-шлюзами и прочими сторонними сервисами. Скобки в префиксе для мобильных тоже неактуальны, ибо потеряли свой изначальный смысл - опциональной части, которую можно опустить при наборе с "вертушки". У мобильных номеров они by design являются неотъемлемой частью. Да и в Москве уже даже со стационарного без 495 или 499 номер не наберёшь.
вот, я тоже считаю, что на бэке уже разобраться можно с восьмёркой
В КР номер телефона начинается с +996. Ввести невозможно. Можно оставить возможность вводить + и отключать маску в случаях, если после + не 7.
Время пол 4 утра, учусь делать маски 🎭
Спасибо огромное за ликбез, очень полезно.
Благодарю, помог очень!
Это всё хорошо, но с точки зрения UX/UI чем меньше у пользователя возможностей для выбора, тем быстрей он сделает выбор. Если не написать сразу +7 и оставить поле пустым, часть пользователей затупит: "ой, а в каком формате вводить телефон? восьмёрку указывать или нет? а может быть семёрку? а с плюсом или без". Так что показать +7 лучше, чем не показывать. Ну а при вставке из буфера обмена, конечно, надо парсить номер с конца и учитывать все эти 7, 8, 9
Можно удалить строку: 46 и просто добавить пробел перед скобкой на строке 48.
И если удалить последнюю цифру и начать вводить в середине, то маска ломается.
А так прикольно! Лайк!
Люблю иногда посмотреть такие простые, ламповые видосики чтобы расслабиться))
- У привычных плагинов маски ввода вот такие проблемы и они ужасны!!! Напишем свой прекрасный вариант!
*пишет свой прекрасный вариант, вылезают косяки*
- Ну, это не важно.
П - последовательность)
Важные косяки (невозможность ввести номер с 9) будут поправлены в github репо. Неважные косяки (возможность удалить скобки при редактировании в середине номера) не есть косяки, если юзер хочет удалить маску, да пусть удаляет, она же для помощи ему, не более того. Отключив js в браузере, он вообще маску сломать может, не называть же это косяком:)
С заменой в середине все норм сделано. Думаю, такое решение было поставлено с учетом статистики юзабилити. Простые юзеры не умеют менять текст по середине, это также сделано для того, чтобы такими манипуляциями люди не вводили неправильные номера, больше вероятность правильного вода тогда, когда его стирают до n строчки и вводят заново
Спасибо за ваши видео, выходит очень интересно и познавательно. Хотелось бы узнать, как можно разбить приложение Django на Frontend и Backend? Или как подключить React или другой фреймворк для фронтенда
Отличное видео! Очень актуальная тема для веб-разработчиков (даже для WP-разработчиков) :)
А что в WordPress какой-то свой javascript используется? :)
Да не нихера тож самое я проверял@@user-dv9fk1hd3s
Суперское видео , спасибо 🙏
Без воды по делу и как-то нескучно.
Молодец, успехов Вам !!!
Спасибо, интересно
Привет ну когда уже что-то будет известно про твой курс ?
Кстати хотел тебя спросить насколько python хорош для работы на фрилансе, есть ли заказы для него кроме заказов в сфере data science?
Как насчет того, что бы проверять ввод "+" и следующих за ним нескольких символов, и по них определять код страны, и потом использовать форматирование номера описанное в ролике. Ролик интересный, лайкнул
для такого наверное надо массив со всеми кодами населенных пунктов держать
Досмотрел пока до "думать мы не хотим... ну ладьненько...", пхахаха!!! Молодчина, что выпустил видос с раскрытием этого, казалось бы мелкого вопроса! Но я за последний (2021) год уже третью попытку делаю найти видео, где бы человек написал хотя бы зачаток плагина для ввода телефона, но все используют плагины по нескольку тысяч строк, просто для валидации телефона.
Ого, теперь заживём! ((:
Отлично. Простой пример. Очень подробно и понятно. Не то чтобы то-то новое узнал, но из того что уже знаю автоматом сложился паззл. Бесценно и удобно. Большое Спасибо.
Круто, спасибо за видео. Возможно применю твой код в кастомизации веб-форм на Битриксе, а то там никаких толком валидаторов нет.
Предусмотрен ввод начиная с 7, 8, 9, но почему-то не предусмотрен ввод начиная с +. Я бы, увидев пустую форму для ввода телефона, не зная заранее как она реализована, начал бы ввод именно с +.
Тоже об этом подумал. Как реализовать есть варианты?
Мое уважение этому добряку.
Эх, где же подобное видео было 2 года назад..
19:02 не рассматриваешь довольно частый кейс, когда лишняя цифра в середине. Нужно удалить и добавить новую цифру в конце.
P.s. я проверил на Тиньков оплата. Там номер становится не по верной маске, но после нажатия "продолжить" все норм
10:59 не понимаю докапку. Если ты удалил элемент формы +7, значит СКОРЕЕ ВСЕГО ты хочешь ввести код другой страны, поэтому зачем форме подставлять +7 снова? Вдруг я из Японии, там код страны +81... У озона форма работает не очень правильно, но критика не во всех аспектах верная
Согласен, автор буквально минуту назад бомбил по поводу клиентов из других стран, и когда ему дали возможность сменить код страны, бомбит по этому поводу....
Согласен, жиза! Сам пытался на работе реализовать ещё в 2013 году, на первом ангуляре! ))) И быстро запилить не получалось. Сделать жёстко фиксированную маску проблемы никакой нет. Но цирк начинается, когда надо вводить не только российские номера. Или если только российские, то код региона может быть и 3-4-5-значным, и под это дело надо по-разному форматировать оставшуюся часть. А кому-то не надо форматировать. Кто-то вставляет номера со скобками, кто-то без скобок. Вообще, кто придумал эти дебильные скобки и дефисы >_< Я считаю, что ни скобки, ни дефисы в инпуте не нужны. Достаточно пробелов.
P.S.: Если хочется побомбить ещё больше, рекомендую зайти на сайт али и войти по номеру телефона :D
али ужасен, сталкивался тут недавно с ним, тупняк на тупняке:)
22:22 Серьёзно?! Значит, ты рассказываешь про type=tel, но при этом оборачиваешь в DOMContentLoaded? :garold:
33:05 а мы точно в старом синтаксисе пишем? Почему тогда let? А если есть let, то вместо .includes() есть .startsWith()
Как же больно смотреть на стилизацию кода :D Все стайлгайды плачут. Главное же чтоб работало))
Рекомендую включить ESLint в редакторе и привыкнуть к нему, чтобы не учить молодых плохому :)
обьясни пожалуйста что не так с DOMContentLoaded?
Отличное видео, спасибо! Есть ли похожие выпуски как правильно создать форму для оформления подписки, и форму для обратной связи?
у меня нет:)
@@t0digital Жаль, эффектно рассказываете)
пушка❤🔥
Ох, почему хорошо то так)))
Давно страдал от маски, которую ещё когда учил js нашёл.
Есть момент, что служебные символы стираются, вместо них можно лишние цифры вписать.
Сейчас гляну, как исправить
(update) Исправил
20:36 даа, чувак, оОООоогроммное спасибо, что упомянул об этом! бесячая штука, еще переключишься в нам-пад, нажмешь пробел или курсор передвинешь и оно обратно на буквы вернется, ыыыыы, ЫХ!
Огнище! Недавно подобное делал на dart. Думал мозг сломаю все это докрутить в "красиво"
Да ты боженька просто)))) От души!!!!
вот это да)) спасибо
Давно не было роликов :-( А мы очень ждём
Спасибо большое!
8:12 "Думать мы не хотим, мы хотим по-быстрому что-то сделать".
Я думал, это обо всех питон-разработчиках :)
Это не то чтобы претензия, я сам на питоне часто пишу. Просто констатация факта, для чего предназначен этот езыг.
Эм, а собстна причём тут питон)?
Вот это знатный контент подъехал!))))
Кроме того, что код страны может быть длинным и начинаться с 8 и 9 (и +7 не только российский), а код региона/оператора может начинаться не только с 9 (т.е. этот алгоритм рассчитан только на мобильные номера РФ, а стационарники разных регионов РФ лесом, напр., 835), добавлю маленькую эстетическую мелочь - закрывающая скобка вставляется только после ввода первой цифры, следующей за кодом региона/оператора. А хотелось бы чтобы скобка закрывалась сразу после ввода третьей цифры кода, раз уж мы и так ограничились тремя цифрами. А еще можно сделать отдельный обработчик вставки номера целиком. Т.е. когда используется автозаполнение в браузере.
зы: регионы России - первые цифры 3, 4, 8.
ззы: еще можно добавить галочку, которая будет выключать маску, если вдруг у кого-то возникли проблемы. Но это уже не изящно, а просто отмазка.
Посмотрел, почитал замечания в комментах. Основная проблема это ввод кода других стран с начинающихся с 7,8 и 9. Мне видится следующее простое решение: нужно разрешить ввод со знака "+", после чего, если далее не "79" отключается форматирование по маске.
полезно! огромное спасибо! лайк и подписка!
В последнее время тоже стал замечать эти косяки и только на сайте тинькофф я находил успокоение. А вот теперь я могу зайти на твой фиджет-сайт и успокаиваться там))
P.S. По привычке стер начало сайта и зашел на to.digital и прочел "Hello, my friend!"
Алексей! Не очень понял претензию к озону. Ведь если вводить в интернациональном формате номер телефона, но при этом пытаться с 9 получается конфликт! Ведь существуют номера в интернациональном формате, которые начинаются с +9, например Азербайджан az 994 00 8 to 9 digits az / aze
Афганистан af 93 00 9 digits af / afg
Бахрейн bh 973 ... 00 8 digits bh / bhr
и т. д.
тоже самое и с +8
спасибо, выручили!
спасибо благодаря тебе написал ее на реакте)
Опа, ручки стабило, я тоже фанат)
а если ты в скобках написал лишнюю цифру, а оно будет не подвигать в скобки цифры?
Смещение номера к началу при удалении цифры это правильное поведение! Т.к. пользователь мог случайно ввести одну и ту же цифру дважды.
На номера других государств так же не будет перезванивать ни один b2c магазин, поэтому и ограничивают.
Ну-ну:)
Для проверки региона и страны номера можно проверять номер не с начала, а с конца. Находим ближайшее совпадение и применяем маску. Например начал писать +7 Россия. Дальше ещё 7. Оп. Казахстан. Ну и конечно для самых значимых пользователей так делается. Остальные просто без форматирования.
Спасибо за маску👍
Приветствую. Замечательно всё расписано, разжевано просто - бери и глотай. Но вот проблема есть одна - в браузере Яндекс не работает код. С чем это может быть связано, можете подсказать?
Супер!
Круто что даже урл на ваш инпут оставили :)
благодарю за инфу, что есть substring()!
Что за ноут? Куда мак делся?)
И да и нет, согласен и не согласен.
Спасибо за видео! Ставьте лайки, подписываемся на канал, нажимаем колокольчик!
Подсветка(или др. индикация) . Пока номер не валидный - красным, когда валидный - зелёным.
Здравствуйте! Благодарю за видео! Прошу прощения за глупый вопрос, я новичок, напишите, пожалуйста, как Вы сделали такую подсветку синтаксиса javascript? У меня, например, выражения: console.log();, element.addEventListener();, let input = event.target (здесь только let имеет другой цвет); и др. однотонные, без выделения смысловых частей по цвету (в строке состояния, в правой части стоит, что vs code определил, что это файл JavaScript, но подсвечивает, почему то только это: let, const, if, else, function...).
Какой редактор кода используете? У меня здесь в видео vscode с почти стандартными настройкаим
@@t0digital Благодарю за ответ! Сборку vs code без телеметрии - VSCodium.
18:30 а как система должна понять, что ты вводишь номер 10 цифр и подставлять надо семерку/восьмерку, а не +1 (например)??? Вдруг ты француз с французким номером...
3 цифры. 8 900 920 950 951 906 и ТД
А если у меня номер другой страны? А если введут завтра новый префикс, который не будет однозначен? Можно только пост-коррекцию делать.
Посмотри как в телеграме это реализовано, как по мне очень даже неплохо
Номера других стран в моем варианте инпута успешно вводятся, я как рах их не игнорирую. Просто они будут без маски, что в моих сценариях не проблема. Куча сайтов как раз игнорят клиентов с не-РФ номером, не позволяя вообще им оформить заказ, о чем говорилось - привет М.Видео и тп
ты просто красавчик!!!!!!!!
Как ввести номер Турции +90 или Азию +8. Почему после ввода первого + не отключить форматирование?
нужно учеть возможность начала набора с "+"
&бать ты докопался, красавчик:)
M1 всё?
Я записываю видео часть курса по веб-разработке сейчас и для курса взял Thinkpad на винде, чтобы примеры показывать на винде. Работаю пока на Thinkpad соответственно. Он хорош, сделаю тоже видос по нему:) С М1 всё в порядке.
@@t0digital Нужно снести окна, и поставить Бубунту. Срочно!!!! =)
бубунта наше всё:)
@@t0digital Или рач :D
@@sashasmirnov5140 лфс лучший дистр
диджитализируй, а есть ещё одна проблема: не легко выделять иногда может быть символы. и например, выделяется число 5 и дефис между 5 и следующей парой. Тогда маска перестаёт срабатывать как надо. Хотя в моём представлении - если я выделил "5-" - если я добавляю новый символ, маска должна сохраниться
Всем привет. А что там не слышно ничего по обучению ?
Ещё не досмотрел, но интересно как сделать поддержку международного номера и распознавание номера который вводиться не сначала а например с 9. Ведь это может быть полный международный номер(пример в Тинькове где вставляется целиком с 9).
Upd: как выяснилось код будет для разных форматов российских и международного формата остальных
Думаю у тех примеров что вы привели иностранные номера не вводятся по другим причинам. Например очень дорогие смс или вообще нет возможности отправлять смс на такие номера
С точки зрения обычного пользователя у сбера в приложении хорошо реализован ввод номера, когда например перевод другому человеку по номеру делаешь. Проблема ввода номера да, актуальная, особенно подбешивает когда стираешь неправильную цифру, а трется вообщем всё
Присоединяюсь, нереально бомбит от 2х таких вещей: номеров "кривомасок" и от шторки в андроид, в которой хрен разберёшь кто тебе написал кто позвонил, и главное не фиксят годами.
Про ввод с 9 - в соседнем казахстане вторая цифра в номерах тоже 7 (+7 707...) - как "идеальный" инпут должен себя в таком случае вести?
Самый лучший ввод номера я видел в телеграме, все чётко и понятно, с минимальным форматирование
а тебя не бомбит от скобочек в номере телефона? скобочки были актуальны во времена, когда не обязательно было набирать 095 в московском городском номере, а теперь им пора бы на свалку!
А когда курс начнётся? Уже больше пол года как ты писал что скоро запустишь, в далёким августе 20 года))
75 из 95 видосов записаны. Работа кипит. Но дёшево не будет, как я и говорил изначально🤗 Не цена книжки.
@@t0digital главное что бы все продуманно было и интересно . Ведь если учитель интересно и доходчиво преподносит материал с хорошей и актуальной практикой то и учится хочется, и глаза горят . Все равно мне кажется после выхода курса должно какое-то время пройти что бы был фидбэк и возможно в курсе будет что то исправлено и допилено, так как с первого раза все идеально не возможно сделать )) это как с приложениями наверно и багами )
А чего не с macbook m1 ?
8:23 КОРОТКО О ПРОГРАМИСТАХ
а если телефон начинается с +8? или +9, я конечно хз, но вдруг есть такие номера
пс: а если лишнюю цифру ввел в скобках и хочешь ее удалить и подвинуть весь остальной номер налево?
Я посмотрел, реально есть страны, телефонные номера которых начинаются с +8 и +9 :)
Меня заинтересовала рубашка. Откуда она? :D
Спортмастер
Есть баг.
Если вставлять не Z, а Z4 (добавить число) прямо в середину стороки, и при этом строка еще не максимальной длины, то Z не вставится, а 4 вставится, но не в месте положения курсора, а в конец строки.
Но хотя бы курсор встанет тоже в конец.
Тут всё не просто. Кодеры зачастую не решают. Это обычно в компаниях решают "менеджеры", ну или как там они называются, те кто пишет задачи кодерам.
Я сам себе искал разработчиков под ресурс, была огромная проблема. Никакой инициативы. То что написал в ТЗ, сделаем именно так. А если криво, мало кто предложит варианты.
Инициатива наказуема. Особенно если есть ТЗ, нужно придерживаться его, а то потом скажут "что ты наворотил, в ТЗ этого не было, убирай". Так что кодеры правильно делали.