Проблема с вводом маски - PullRequest
Новая
       22

Проблема с вводом маски

0 голосов
/ 27 октября 2019

Я уверен, что у этого есть простое решение, но я просто не могу понять это.

На моей странице HTML у меня есть поле ввода, подобное этому: 

<input name="visitor_phone" id="visitor_phone" placeholder="Enter your contact number" onfocus="this.placeholder = '27(___)___-____'" onblur="this.placeholder = 'Enter your contact number'" class="input_test" type="text">

и следующий Javascript: 

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

Когда я ввожу контактный номер, например. 270123456789, он показывает его в следующем формате: 27 (012) 345-6789.

Но если я хочу удалить числа, используя клавишу возврата, я могу удалить только до ")" закрывающей скобки. Затем я не могу вернуться назад и вынужден сначала перемещать курсор между скобками, прежде чем продолжить. У меня та же проблема, если я заменяю скобки пробелами.

Похоже, что поле ввода не "распознает" символы, помещенные туда маской.

Я также пытался изменить Javascriptна это: 

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

но есть такая же проблема.

Есть какие-нибудь рекомендации?

Спасибо

...