Привет всем! Я делаю форму на сайте и хочу, чтобы номер телефона вводился красиво, с тире. Например, чтобы получалось 123-456-7890, а не просто 1234567890. Как это лучше сделать на JavaScript? Может, есть какая-то удобная функция или библиотека? Буду благодарен за любые идеи и примеры кода. Заранее спасибо за помощь!
я тоже недавно столкнулся с этой задачей. в итоге решил через обработчик события input. вот примерный код:
document.getElementById(‘phone’).addEventListener(‘input’, function(e) {
let x = e.target.value.replace(/\D/g, ‘’).match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2] ? x[1] : x[1] + ‘-’ + x[2] + (x[3] ? ‘-’ + x[3] : ‘’);
});
работает отлично, проверено в бою. главное - не забыть проверить на разных браузерах. удачи с реализацией!
Можно использовать регулярное выражение для форматирования. Примерно так:
input.value = input.value.replace(/(\d{3})(\d{3})(\d{4})/, ‘$1-$2-$3’);
Это автоматически добавит тире после каждых трех цифр. Еще вариант - готовая библиотека типа Cleave.js, она предоставляет кучу опций для форматирования. А какой способ тебе кажется удобнее?
Мой подход - использовать маску ввода. Я обычно юзаю InputMask.js - легковесная и проверенная библиотека. Подключаешь, навешиваешь на инпут:
new Inputmask(‘+7 (999) 999-99-99’).mask(document.getElementById(‘phone’));
И всё, маска применяется автоматом. Удобно и для юзера, и для валидации. Можно кастомизировать под свои нужды. Рекомендую попробовать.