Почему курсор прыгает в конец маски если вводить с середины?

Question

[Вячеслав Яшников]

Добрый день!
Делаю решение для маски телефона, в чем смысл:
маска активируется если ввели первые цифры 7,8,9 и начинает работать как [phone]
Если ввели больше чем положено символов - маска ломается на просто [phone] до 16 символов
Если ввели любую другую цифру в начале то маска выглядит как [phone]
Если ввели [phone] а затем удалили до [phone] - маска активируется

Все это реализовал, но вот затык с курсором, если начать вводить цифры или удалять цифры с середины номера - курсор прыгает в конец, тут остался логический вопрос вычитать положение курсора и устанавливать его, но у меня уже что-то мозг взрывается :)) потому обращаюсь за помощью сюда

codepen:

Answer 1

[Алексей Уколов]

Курсор "прыгает" потому, что вы полностью стираете значение инпута и пишете в него новое. Соответственно, вам действительно нужно сначала запомнить где он находится, а потом его вернуть.

function getCaretPosition(ctrl) {
    // IE < 9 Support 
    if (document.selection) {
        ctrl.focus();
        var range = document.selection.createRange();
        var rangelen = range.text.length;
        range.moveStart('character', -ctrl.value.length);
        var start = range.text.length - rangelen;
        return {
            'start': start,
            'end': start + rangelen
        };
    } // IE >=9 and other browsers
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
        return {
            'start': ctrl.selectionStart,
            'end': ctrl.selectionEnd
        };
    } else {
        return {
            'start': 0,
            'end': 0
        };
    }
}

function setCaretPosition(ctrl, start, end) {
    // IE >= 9 and other browsers
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(start, end);
    }
    // IE < 9 
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    }
}

https://www.vishalon.net/blog/javascript-getting-a...

Comments

[Вячеслав Яшников]

Это понятно, что переписываю поле ввода, проблема в логике перестановки курсора, так как не могу понять как считать положение курсора когда например появилась маска и затем пропала

[Алексей Уколов]

Я вам код показал.

Answer 2

[Вячеслав Яшников]

Готовое решение маски ввода номера телефона для РФ и для других стран