Поле форматирования (полное & ES3)

Question

Я пытаюсь реализовать исчерпывающее форматирование полей (здесь, бельгийских телефонных номеров), пока пользователь печатает.

Вот код:

FormatZoneNumberOther: function (field, event, isGsm) { // +32 XX XX XX XX

    console.log('FormatZoneNumberOther');

    var authorisedValues    = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Enter', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'],
        keyValue            = event.key; // string of the key pressed

    if (field.value.length === 3 ||
        field.value.length === 6 ||
        field.value.length === 9 ||
        field.value.length === 12 ||
        field.value.length === 15) {

        field.value += ' ';
    }

    if ((authorisedValues.indexOf(keyValue) === -1) && (keyValue !== '+') && (field.value.length !== 1)) event.preventDefault();

    if (field.value.length > 14) {

        event.preventDefault(); // prevent longer number than needed
        checkZoneCode(field.value.substring(4, 7));

        if (isGsm) {
            alert('You have to insert a GSM number with format: +XX XX XX XX XX (FormatZoneNumberOther)');
            return false;
        }
    }
},

Проблема, которую мой клиент попросил меня решить, - это когда конечный пользователь хочет изменить одну или несколько частей номера: 01 234 55 67 89 => 01 222 55 67 89.

Очевидно, что пользователь поместил бы курсор щелчком мыши или, возможно, клавишами со стрелками, но это вызывает некоторые проблемы, поскольку проверка выполняется на основе длины поля, которая затем будет длиннее, чем курсор.

Как я могу улучшить эту функцию, чтобы учесть запросы моего клиента, а также в глобальном масштабе?

Заранее спасибо,

PS: это должно быть сделано в ES3 или JQuery 2.1.3 (максимум) и работать на IE11 по причинам...

Edit1: я не могу использовать шаблоны ввода HTML5 по тем же причинам. Edit2: я пытался реализовать проверку регулярного выражения, как это казалось многообещающим, но я не могу понять, как эффективно протестировать изменяющуюся строку (когда я печатаю) с фиксированным шаблоном. Если это помогает, когда пользователь отправляет поле, мой бэкэнд выполняет следующий тест:

var pattern = / (+ \ d {2}) {1} (46 [0-1] | 463 | 46 [5-8] | 47 [0-9] | 480 | 48 [3-9] | 49 [ 0-9]) {0,} (\ d {2}) {0,} (\ d {2}) {0,} (\ d {2}) {0,} /

Answer 1

Итак, мое решение нуждается в полировке, но мне удалось полностью обойти мои проблемы:

FormatZoneNumberGSM: функция (поле, событие) {// +32 XX XX XX XX

console.log('FormatZoneNumberGSM');

var pattern = /\d/,
    authorisedKeys      = ['ArrowUp','ArrowRight','ArrowDown','ArrowLeft','Delete','Backspace','Tab','PageDown','PageUp',' '],
    tempFieldValue      = field.value,
    shortTempFieldValue = tempFieldValue.replace(/\s/g, '');

if (((authorisedKeys.indexOf(event.key) === -1) && (pattern.test(event.key) === false)) || (shortTempFieldValue.length > 11)) event.preventDefault();

if ((shortTempFieldValue.length === 11) && !(field.value.length > 16)) field.addEventListener("blur", function(){eventFocusOut(field)});

function eventFocusOut (field) {

    var temp = field.value.replace(/\s/g, '');
    field.value = temp.substring(0, 3) + ' ' + temp.substring(3, 6) + ' ' + temp.substring(6, 8) + ' ' + temp.substring(8, 10) + ' ' + temp.substring(10);
    checkZoneCode(temp.substring(3, 6));
}

},