Проблема с позицией каретки при изменении поля (HTML + JS) - PullRequest
Новая
       22

Проблема с позицией каретки при изменении поля (HTML + JS)

0 голосов
/ 20 января 2011

Первоначальный разработчик запрограммировал следующий JavaScript, который на мой взгляд немного дилетантский, но я не очень много работаю в Javscript, поэтому я не могу предложить лучшее решение со временем, которое у меня есть.

Проблема, которую мне нужно решить, заключается в том, что каждый раз, когда вы нажимаете любую клавишу, которая посылает ввод в текстовое поле (любое <input type="text" class="phone_val"...), каретка перемещается в конец, потому что код заменяет ее.

Целью кода является форматирование числа для использования в базе данных.Допустимые шаблоны: 

          235 - 5555
    (321) 234 - 5555
  1 (321) 234 - 5555
 21 (321) 234 - 5555
012 (321) 234 - 5555

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

HTML: 

<input type="text" class="phone_val" style="width: 85%; text-align: right;"
       value="<%= CustomerFields("billing_phone") %>" id="billing_phone"
       name="billing_phone" tabindex="10" />

Javascript (предполагается, jQuery): 

$(document).ready(function() {
    $('.phone_val').attr('maxlength', 20);
    $('.phone_val').keyup(function(){
        var startVal, finVal, i;
        startVal = $(this).val().replace(/\D/g,'');
        if (startVal.length <= 7) {
            finVal = "";
            for (i = 0; i < startVal.length; i += 1) {
                if (i === 3) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }
        else if (startVal.length > 7 && startVal.length < 11) {
            finVal = "(";
            for (i = 0; i < startVal.length; i += 1) {
                if (i === 3) {
                    finVal += ") " + startVal.charAt(i);
                }
                else if (i === 6) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }
        else if (startVal.length >= 11) {
            finVal = "";
            stopP = startVal.length < 13 ? startVal.length - 11 : 2;
            for (i = 0; i < startVal.length; i += 1) {
                if (i === stopP) {
                    finVal += startVal.charAt(i) + " (";
                }
                else if (i === (stopP + 4)) {
                    finVal += ") " + startVal.charAt(i);
                }
                else if (i === (stopP + 7)) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }

        if (startVal.length < 4) {
            finVal = finVal.replace(/\D/g,'');
        }
        $(this).val(finVal);
    });
});

Ответы [ 2 ]

1 голос
/ 20 января 2011

Это ужасно на многих уровнях. Для пользователя здесь есть две плохие вещи: во-первых, изменение ввода по мере ввода вводит в заблуждение и раздражает, а во-вторых, перемещение каретки до конца при каждом вводе символа просто приводит в бешенство. Хотя можно написать код для перемещения каретки, я бы порекомендовал против него и вместо этого предложил бы выполнить проверку в событиях change или blur или подождать несколько секунд бездействия клавиатуры, как вы предлагаете. в вашем комментарии.

0 голосов
/ 20 января 2011

Вот то, что я получил до сих пор: 

$('.phone_val').blur(function () {
    var inpVal = $(this).val().replace(/\D/g, ''); //get rid of everything but numbers

    // RegEx for:
    //    xxx (xxx) xxx - xxxx
    //     xx (xxx) xxx - xxxx
    //      x (xxx) xxx - xxxx
    //        (xxx) xxx - xxxx
    inpVal = inpVal.replace(/^(\d{0,3})(\d{3})(\d{3})(\d{4})$/, '$1($2) $3 - $4');

    // RegEx for (needs a separate one because of the parentheses):
    //              xxx - xxxx
    inpVal = inpVal.replace(/^(\d{3})(\d{4})$/, '$1 - $2');

    $(this).val(inpVal);
});

Это заботится о 7 цифрах и 10-13 цифрах, но я не уверен, что делать с теми, которые между ними.Должен ли я также отформатировать их, чтобы пользователь мог легко увидеть свои ошибки?Или я должен оставить их в покое?

...