Маска для input tel

@klopp · Регистрация: 14.10.2017

Студворк — интернет-сервис помощи студентам

Пытаюсь написать маску для ввода телефона в форме, и хочу сделать как-бы автодополнение, т.е. пользователь ввёл три цифры - скобка сама закрылась и добавилось тире, еще через три цифры еще тире, и еще через две. Должен получиться ввод типа +7(999)-123-45-67. И всё хорошо получается, но вот если попытаться затереть несколько последних цифр backspace-ом, то он цифры стирает, а дойдя до тире - останавливается.

HTML5
1
<input type="tel" name="phone" placeholder="+7(999)-123-45-67" id="tel-inp">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let telInp = document.getElementById('tel-inp');
//контроль количества введенных цифр
let howDigits = str => str.split('').filter(el => /\d/.test(el)).length;
//при фокусе подставляем +7(
let whenFocusPhone = e => e.target.value = '+7(';
//чтоб вводились только цифры
let checkPhoneKey = key => key >= '0' && key <= '9';
let checkNumPhone = (e) => {
    if(!checkPhoneKey(e.target.value[e.target.value.length - 1]) || howDigits(e.target.value) > 11)
        e.target.value = e.target.value.slice(0, -1);
    if(e.target.value.length == 6)
        e.target.value += ')-';
    if(e.target.value.length == 11 || e.target.value.length == 14)
        e.target.value += '-';
}
telInp.addEventListener('focus', whenFocusPhone);
telInp.addEventListener('input', checkNumPhone);
telInp.addEventListener('keydown', checkPhoneKey);

Вопросы:
1. Почему backspace не может удалить тире и скобку?
2. Как заставить его это сделать?

P.S. Без автодополнения всё работает как и должно, т.е. проблема только в символах, введенных программно.
Если стрелкой влево перескочить тире то стирает цифру и тире вместе с ней.

Qwerty_Wasd · 22.12.2019, 15:11

Сообщение от klopp

1. Почему backspace не может удалить тире и скобку?

Сообщение от klopp

Если стрелкой влево перескочить тире то стирает цифру и тире вместе с ней.

потому, что в обработчике нажатия клавиш Вы со строки 11 при проверке на кол-во цифр равным 6 и в строке 13 - равным 11 или 14, снова дописываете скобку с тире или просто тире. То есть бэкспэйс то работает, но глаз этого не видит из-за того, что скрипт тут же дописывает стертое.

Сообщение от klopp

2. Как заставить его это сделать?

пересмотреть алгоритм

- https://jsfiddle.net/Qwerty_Wasd/kn87of9v

HTML5
1
<label for="tel-inp">+7 </label><input type="tel" name="phone" placeholder="(999)123-45-67" id="tel-inp">

JavaScript
1
2
3
4
document.getElementById('tel-inp').addEventListener('input', (e) => {
  let x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ')' + x[2] + (x[3] ? '-' + x[3] : '') + (x[4] ? '-' + x[4] : '');
});

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

Маска для input tel

Решение