Question

页面上的HTML有20个<input>个字段，每个字段按1到20的递增顺序命名和给出ID。

如果变量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之类的内容它可能会起作用，但它也可能导致以后难以调试的问题。最好在谨慎和最佳实践方面犯错误。

What are valid values for the id attribute in 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

（尝试使用.blur()代替.focusout()。但这可能无济于事）

尝试删除alert()一段时间 - 它有时会导致焦点问题......

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

<强> jsFiddle Example

这是我的代码，我会解释我改变的内容：

$('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），这实际上从未给它机会。
最后但并非最不重要的是，我为输入提供了更好（且有效）的ID。 ID不得以数字开头。

Jquery专注于输入字段

5 个答案: