Маска телефона на Jquery

WKTP

WKTP

Постоялец
Регистрация
5 Сен 2013
Сообщения
53
Реакции
7
День добрый!

Время от времени клиенты при оформлении заказа и т.п. вбивают номер телефона кто с 7, кто с 8, с + и без, иногда получаем кривой номер — +7 (891) 755-55-55
Где 917 код, остальное номер(

Сама маска реализована через jquery.maskedinput.js
Скрытое содержимое доступно для зарегистрированных пользователей!

Код: 
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery.maskedinput.js"></script>
<script>
$(function() {
        $("#phone").mask("+7 (999) 999-99-99");
});
</script>
</head>
<body>
<input type="tel" class="form-control" id="phone" name="phone">

Видел на сайте
Скрытое содержимое доступно для зарегистрированных пользователей!
, который сделан на bitrix, маску в которой вводишь +7, 7, 8, +8 получается всегда +7 или сразу код, при этом в коде города 8 в начале! не дает ввести, только с 9, потом 8 вводится и дальше все как обычно, выдернуть не смог!

В результате как бы не вводил в начале 7, 8 с плюсом или без, сразу с кода, в итоге получаю +7 (918) 555-55-55

Как реализовать такое же?

Спасибо
 
Там оно на Vue написано. Исходники ты вряд-ли найдёшь.
А так можешь хоть на чистом JS-е написать.
Вешаешь обработчик события на поле ввода и в зав-ти от введённого символа и текущей позиции изменяешь содержимое поля.
 
  1. Используйте jQuery для обработки ввода.
  2. Обработайте ввод пользователя, чтобы удалить невалидные символы и привести номер к стандартному формату.

Вот как вы можете реализовать это в вашем коде:​

Код: 
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Форматирование номера телефона</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$(function() {
// Применяем маску
$("#phone").mask("+7 (999) 999-99-99");

// Обработчик события ввода
$("#phone").on('blur', function() {
let phone = $(this).val().replace(/[^0-9]/g, ''); // Удаляем все, кроме цифр

// Проверяем формат и добавляем код
if (phone.length === 10) {
// Если 10 цифр, добавляем код +7
phone = '7' + phone; // Заменяем 8 на 7, если номер начинается с 8
} else if (phone.length === 11) {
// Если 11 цифр, проверяем на наличие кода
if (phone.startsWith('8')) {
phone = phone.replace('8', '7'); // Заменяем 8 на 7
}
} else if (phone.length < 10) {
// Если номер короткий, очищаем поле
phone = '';
}

// Если номер теперь 11 цифр, форматируем его
if (phone.length === 11) {
// Преобразуем номер в нужный формат
const formattedPhone = `+${phone.charAt(0)} (${phone.slice(1, 4)}) ${phone.slice(4, 7)}-${phone.slice(7, 9)}-${phone.slice(9, 11)}`;
$(this).val(formattedPhone);
} else {
$(this).val(''); // Очищаем поле, если номер некорректный
}
});
});
</script>
</head>
<body>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="+7 (___) ___-__-__">
</body>
</html>
 
Вот пишите пишите что маска и так далее... А как насчёт css? type="tel" - это ведь всего лишь название поля можно и на русском так написать) и вообще jquery это всего лишь вызов скрипта) И то его надо дописать ещё. Вдруг будет работать только на пк версии браузера. А мобилити как и все остальное?)
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху