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

HTML на странице имеет 20 <input> полей, каждый из которых именован и задан ID в порядке возрастания от 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();
    }
});

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

Ответы

Ответ 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 или подобное (похоже, вы уже знаете об этом).

Ответ 2

заменить

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

по

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

или даже

$(this).focus();

Ответ 3

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

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

Ответ 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();
        }
    });

Ответ 5

Пример 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();
    }
});
  • Я использую focus() вместо select(), который не будет работать.
  • Вы путаете id с select, который заставил вас всегда попробовать и выбрать $("#input-IDOFSELECTIONINPUT") вместо $("#input-IDOFWANTEDINPUT")
  • В вашем коде, хотя предупреждение было бы сброшено, остальная часть кода продолжалась бы нормально. Это не будет в моем коде.
  • Вы поставили желаемый результат ($("#"+id).select();) в нежелательном состоянии (input > 10), что практически никогда не давало ему шанса.
  • И последнее, но не менее важное: я дал входы более эффективный (и действительный) идентификатор. Идентификаторы не должны начинаться с числа.