Набор информации всегда начинается с начала строки для поля ввода input
Всем привет!
Работаю с сайтом на WordPress. Тип поля набора информации - мобильный телефон.
Есть задача:
Настроить поле ввода таким образом, чтобы куда ни кликнул пользователь в рамках данного поля, набор цифр всегда начинается с самого начала, а не от туда куда он кликнул. А если в поле уже набраны какие то цифры, набор новых символов будет продолжать с того места, где стоит последний символ.
Был написан следующий код на JS:
[].forEach.call(document.querySelectorAll('input[type="tel"]'), function (input) {
let keyCode;
function mask(event) {
event.keyCode && (keyCode = event.keyCode);
let pos = this.selectionStart;
if (pos < 3) event.preventDefault();
let matrix = '+7 (___) ___-____',
i = 0,
def = matrix.replace(/\D/g, ''),
val = this.value.replace(/\D/g, ''),
new_value = matrix.replace(/[_\d]/g, function (a) {
return i < val.length ? val.charAt(i++) def.charAt(i) : a
});
i = new_value.indexOf('_');
if (i != -1) {
i < 5 && (i = 3);
new_value = new_value.slice(0, i)
}
var reg = matrix.substr(0, this.value.length).replace(/_+/g,
function (a) {
return '\\d{1,' + a.length + '}'
}).replace(/[+()]/g, '\\$&');
reg = new RegExp('^' + reg + '$');
if (!reg.test(this.value) this.value.length < 5 keyCode > 47 && keyCode < 58) this.value = new_value;
if (event.type == 'blur' && this.value.length < 5) this.value = ''
}
input.addEventListener('input', mask, false);
input.addEventListener('focus', mask, false);
input.addEventListener('blur', mask, false);
input.addEventListener('keydown', mask, false);
});
Данным кодом удалось решить изначально поставленную задачу, но появилась новая проблема: последние две набранные цифры меняются местами (например: набираешь с клавиатуры 57, а в поле вода отображается 75).
Подскажите пожалуйста, что я делаю не так? Как всегда заранее низкий поклон!