Отформатировать буфер ввода телефона, не могу удалить вставленные данные
У меня есть javascript, который форматирует вставленные числа в мобильный формат, например +1 (222) 333 33-33. Вроде бы все работает, но я не могу удалить все вставленные данные, я могу удалить только часть номера 333 33-33, поэтому эта часть +1 (222) остается нетронутой.
document.getElementById('phone').addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = '+' + x[1] + '(' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '');
});<input type = "text" id = "phone" placeholder = "+1(222) 555-5555" />Рабочий пример: https://jsfiddle.net/RedEclipse/23pntueb/13/
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
У меня нет для вас решения (извините), но причина, по которой вы не можете удалить первые части, заключается в том, что как только вы нажмете клавишу Backspace, чтобы удалить пробел после закрывающей скобки, ваш слушатель сразу же вставит пробел обратно. Таким образом, следующий возврат снова удаляет пробел (который снова добавляется) и так далее.
Попробуйте так:
var length = 0;
document.getElementById('phone').addEventListener('input', function (e) {
if (length <= e.target.value.length) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = '+' + x[1] + '(' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '');
length = e.target.value.length;
};
});<input type = "text" id = "phone" placeholder = "+1(222) 555-5555" />Создайте переменную, чтобы запомнить длину текста в поле ввода. Если при вводе длина текста уменьшилась, значит, пользователь удаляет текст, поэтому не применяйте регулярное выражение.