Jquery Фокус на поле ввода

Question

HTML-код на странице содержит 20 <input> полей с именами и идентификаторами в порядке возрастания от 1 до 20.

Если для переменной id задано следующее последовательное значение id (id + 1), эта функция применит фокус к этому полю.Однако, если щелкнуть за пределами текущего поля ввода, последнее поле ввода не восстановит фокус, если введенное число больше 10, но отобразится предупреждение.

$(":input").focusout(function(){
    var input = $(this).val();
    var id    = $(this).attr('id');
    if(input > 10){ 
        alert('You must enter a number between 0 and 10 '+id);
        $("#"+id).select();
    }
});

Как можно выполнить последний вводполе для восстановления фокуса?

Answer 1

Попробуйте заменить:

$("#"+id).select();

на:

$(this).focus();

В этом случае $("#"+id) и $(this) - это один и тот же элемент, и я предполагаю, что вы хотитеfocus элемент при возникновении ошибки.

В сторону: я не верю, что значения id или name могут по закону начинаться с цифры, возможно, вы захотите поставить перед ними префикс с чем-то вроде option1, option2 и т. Д. Это может сработать, но позже это также может вызвать проблемы, которые трудно отладить.Лучше всего допустить ошибку с осторожностью и рекомендациями.

Какие допустимые значения для атрибута id в HTML?

Редактировать : послене получая focus() на работу, я попытался с setTimeout и смог это сделать.Я не уверен, почему или если это действительно необходимо, но, похоже, это работает.

$(":input").focusout(function(){
    var $this = $(this),
        input = $this.val();

    if (input > 10){
        alert('You must enter a number between 0 and 10');
        setTimeout(function(){
        $this.focus();
        }, 1); 
    }
}); 

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

Демонстрация: http://jsfiddle.net/zRWV4/1/

Как упоминалось в комментариях, вы должны в конечном итоге убедиться, чтозначение является целым числом с parseInt или подобным (вы, кажется, уже знаете об этом).

Answer 2

заменить

$("#"+id).select();

от

$("#"+id).focus();

или даже

$(this).focus();

Answer 3

Пример jsFiddle

Это мой код, я объясню, что я изменил:

$('input[id^="input"]').focusout(function(){
    var selected = parseInt($(this).val(), 10);
    if (selected <= 10) {
        $("#input-"+selected).focus();
    }
    else {
        alert('Invalid Argument! 1-10 only!');
        $(this).focus();
    }
});

1. Я используюfocus() вместо select(), который не будет работать.
2. Вы перепутали id с select, что заставило вас всегда пытаться выбрать $("#input-IDOFSELECTIONINPUT") вместо $("#input-IDOFWANTEDINPUT")
3. В вашем коде, хотя бы было выдано предупреждение, остальная часть кода продолжала бы нормально.В моем коде этого не будет.
4. Вы поместили желаемый результат ($("#"+id).select();) в нежелательное состояние (input > 10), что практически никогда не давало ему шанс.
5. И последнее, но не менее важное: я дал входам лучший (и действительный) идентификатор.Идентификаторы не должны начинаться с цифры.

Answer 4

Вы должны проанализировать текст внутри ввода, чтобы сравнить его с числом. var input = parseInt($(this).val()); «

   $(":input").blur(function(){
        var input = parseInt($(this).val());
        var id    = $(this).attr('id');
        if(input > 10){ 
            alert('You must enter a number between 0 and 10 '+id);
            $("#"+id).select();
        }
    });

Answer 5

(Попробуйте использовать .blur() вместо .focusout(). Но это, вероятно, не поможет)

Попробуйте удалить alert() на некоторое время - иногда это может вызвать проблемы с фокусом..