Маска для ввода телефона на JS / Плагин IMask.js

––––––––––––––––––––––––––––––

––––––––––––––––––––––––––––––

📋 Кратко, о чем это видео

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

––––––––––––––––––––––––––––––

📌 Полезные ссылки

––––––––––––––––––––––––––––––

🕒 Таймкоды из видео

0:00 Демонстрация маски
1:07 - Исходный код с объяснением
2:00 - Обзор разметки стартового проекта
2:49 - Блокируем кнопку
3:25 - Стили для активной кнопки
3:56 - Скрипт для работы маски
5:10 - Скрипт для разблокировки кнопки
7:26 - Завершение

[soln_sce]

Спасибо, это видео мне помогло, когда я впервые столкнулась с необходимостью применить такую маску

[Sergey-lgke]

автору большое спасибо! Комент в поддержку ролика

[hairy_nose]

как сделать маски для нескольких стран и менять их самому при нажатии на какую-то кнопку? Спасибо за видео!

[alexandraweather]

очень полезно и просто рассказано!
а есть вариант добавить такую маску, если я работаю на реакте, а сама форма из библиотеки shadcn? и все это в vite
ничего не находится у меня нигде(

[vyacheslavvasilev]

Пара дополнений после просмотра:
1. При вводе телефона люди часто на автомате начинают вводить его с восьмерки, и получается что-то вроде "+7 (89... Последняя цифра, соответственно, просто не помещается, и номер отправляется с ошибкой. Т.е. желательно, чтобы маска проверяла первый вводимый символ, и если это 8, то меняла его на +7 автоматом. Насколько я понял, этот плагин это не учитывает, а жаль. В свое время искал подобрый плагин на jquery и тогда тоже не нашел такой, который учитывал бы этот момент
2. Если на одной странице будет несколько полей с классом phone, маска сработает только один раз. Наверное, более универсальным решением было бы использовать querySelectorAll и цикл for

[deanwichester]

А как сделать самому без плагина, вот в чем вопрос

[demianamnel]

У меня не работает( все подключено, код такой, в консоле браузера указывает на ошибку в одном из файлов плагина