Фильтрация текстового поля ввода с использованием jquery заставляет курсор прыгать в IE и Chrome

Я фильтрую ввод в текстовых полях ввода, например:

And I am filtering input on the fly, like removing non-numeric characters.

$("#txtlevel").bind('keyup', function(evt)
{
    var value = $(this).val();
    value = value.replace(/\D/g, '');   /* Remove any non-digit characters */
    if ( value.length > 1 )
    {
        value = value.replace(/^[ 0]/g,'');   /* Remove any leading spaces or zeros */
    }
    $(this).val(value);
}

Это прекрасно работает в Firefox, но в IE и Chrome курсор каждый раз перескакивает в конец поля ввода. Как я могу предотвратить это или сбросить положение курсора? Я видел код для текстовых полей, но не для текстовых полей ввода.


input jquery cursor-position
person Mike    schedule 15.08.2011    source источник
comment
у меня отлично работает вот ссылка jsfiddle.net/SJmCY   -  person Kishore    schedule 15.08.2011
comment
@Kishore Это не работает для меня. Курсор все еще идет в конец текстового поля, когда я редактирую начало числа   -  person Daveo    schedule 15.08.2011
comment
Извините, поместите мой ответ в блок ответов ниже. Попробуйте пример сценария ввода. Тогда вы должны увидеть проблему.   -  person Mike    schedule 15.08.2011

Ответы (2)


arrow_upward
3
arrow_downward

Когда вы используете keyup и выполняете замену регулярных выражений (другими словами, устанавливаете value), курсор переместится в конец. Если ваша цель — разрешить только цифровые клавиши (плюс backspace, delete), попробуйте следующее:

$("#txtlevel").bind('keydown', function(event) {
    // Allow only backspace, delete, left and right arrows, return and tab
    if (event.keyCode == 46 || 
        event.keyCode == 8 || 
        event.keyCode == 37 || 
        event.keyCode == 39 || 
        event.keyCode == 13 || 
        event.keyCode == 9) {
        // let it happen
    }
    else {
        // stop the keypress if not a number
        if (event.keyCode < 48 || event.keyCode > 57 ) {
            event.preventDefault(); 
        }   
    }
});

Чтобы отменить нечисловые события при вставке, привяжите его к событию paste:

$("#txtlevel").bind('paste', function(e){ 
    var value = $(this).val();
    value = value.replace(/\D/g, '');   /* Remove any non-digit characters */
    if ( value.length > 1 ) {
        value = value.replace(/^[ 0]/g,'');   /* Remove any leading spaces or zeros */
    }
    $(this).val(value);
});
person Mrchief    schedule 15.08.2011
comment
Это сработало отлично! Я также добавил табуляцию, возврат, стрелки влево и вправо, поэтому мой if выглядит так: - person Mike; 15.08.2011
comment
if ( evt.keyCode == 46 || evt.keyCode == 8 || evt.keyCode == 37 || evt.keyCode == 39 || evt.keyCode == 13 || evt.keyCode == 9 ) { - person Mike; 15.08.2011
comment
Большой! Я добавлю это к своему ответу. - person Mrchief; 15.08.2011
comment
Я проснулся этим утром, думая об этом, и понял, что вырезание/вставка так не работает. Если я добавлю клавишу ctrl и клавиши ctrl-v, это позволит им вставлять что угодно. Есть ли способ добавить вырезание / вставку в ваш ответ, но захватить то, что вставляется, и «просмотреть»? - person Mike; 15.08.2011
comment
Ага. Смотрите мое обновление. Я использую ваш код, так как думаю, что этого будет достаточно, но не стесняйтесь изменять его по своему усмотрению. - person Mrchief; 15.08.2011

arrow_upward
0
arrow_downward

Вы можете сохранять и восстанавливать положение курсора. Таким образом, курсор не будет прыгать в конец текста.

$("#txtlevel").bind('keyup', function(evt)
{
    var pos = evt.target.selectionStart; // Save cursor position
    var value = $(this).val();
    value = value.replace(/\D/g, '');   /* Remove any non-digit characters */
    if ( value.length > 1 )
    {
        value = value.replace(/^[ 0]/g,'');   /* Remove any leading spaces or zeros */
    }
    $(this).val(value);
    evt.target.selectionEnd = pos; // Restore cursor position
}
person lofihelsinki    schedule 02.03.2018