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

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

0 голосов
/ 11 сентября 2018

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

Вот код: 

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,} /

1 Ответ

0 голосов
/ 13 сентября 2018

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

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));
}

},

...