Очистка полей ввода javascript / jquery

Question

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

Итак, я использую событие обнаружения нажатия клавиш, например .keyup()

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

Пока скрипт очищает данные по мере их ввода, их курсор отправляется в конец поля ввода.

Так что, если вы хотите отредактировать середину значения, ваш курсор сразу перейдет к концу поля.

Кто-нибудь знает способ поддержания текущей позиции курсора внутри поля ввода?

Я не задерживаю дыхание, но я подумал, что спрошу.

Вот код очистки, который я использую:

$(".pricing").keyup(function(){

   // clean up anything non-numeric
   **var itemprice = $("#itemprice").val().replace(/[^0-9\.]+/g, '');** 

   // return the cleaner value back to the input field
   **$("#itemprice").val(itemprice);**

});

Answer 1

Если бы я мог сделать предложение, возможно, было бы более элегантное решение. Просто запретите ввод нецифровых ключей:

** Позвольте мне пересмотреть, эта функция должна работать лучше, чем ранее опубликованная:

    $(".pricing").keypress(function(event) {
        // disallow anything non-numeric
        var nonNumeric = /[0-9\.]+/g;
        var key = String.fromCharCode(event.which);
        if (!(key == '' || nonNumeric.test(String.fromCharCode(event.which)) || event.which == 8 || event.which == 13)) {
            return false;
        }
    });

Конечно, вы, возможно, захотите немного подстроиться, но это должно помочь вам начать.

Кроме того, если вы обеспокоены тем, что dclowd9901 сказал выше, вы можете отобразить сообщение проверки о том, что нечисловые записи не разрешены, вместо простого глотания нажатия клавиши.

Answer 2

Я рекомендую алфавитно-цифровой плагин jQuery: http://www.itgroup.com.ph/alphanumeric/

Answer 3

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

$(".pricing").keydown(function(){

   // clean up anything non-numeric
   var cursor = getCaretPosition($("#itemprice"));
   **var itemprice = $("#itemprice").val().replace(/[^0-9\.]+/g, '');** 

   // return the cleaner value back to the input field
   **$("#itemprice").val(itemprice);**
   setCaretPosition($("#itemprice"), cursor)

});

function GetCaretPosition (ctrl) {
    var CaretPos = 0;

    if (document.selection) {  // IE
        ctrl.focus ();
        var Sel = document.selection.createRange ();
        var Sel2 = Sel.duplicate();
        Sel2.moveToElementText(ctrl);
        var CaretPos = -1;
        while(Sel2.inRange(Sel))
        {
            Sel2.moveStart('character');
            CaretPos++;
        }
    }

    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {  // Others
        CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
}

function setCaretPosition(elem, caretPos) {
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Кроме того, почему бы не указать $(this) в вашей функции вместо жесткого кодирования в #itemprice

Answer 4

Вам необходимо сохранить позицию каретки перед изменением значения и восстановить его после. Это может потребовать некоторых вычислений, чтобы определить, где он должен оказаться после удаления некоторых символов, но вы можете настроить его после того, как начнете работать с основами. Вот первый хит в Google для позиционирования каретки jQuery .