jQuery:选择第一个空文本输入

Question

考虑这个HTML:

<input type="text" name="userinput[]" />
<input type="text" name="userinput[]" />
<a href="javascript:void(0);">More</a>

这里的目的是让用户在表单字段中输入值,如果他们想要更多字段,单击链接将执行此jQuery:

$('a').click( function(e) {
    e.preventDefault();
    $(this).before('<input type="text" name="team_names[]" />');

    //refocus on the first empty input
    $('input[value=""]:first').focus();
});

因此,"用户A"填写两个表单字段,单击"更多"链接,再添加两个输入字段,浏览器关注第三个整体字段(由于它是第一个空字段).不幸的是,代码选择了第一个整体字段.我可以让它专注于最后一个输入字段...没问题...但如果用户在填写其他字段之前多次单击"更多",我仍然希望专注于第一个空字段.

我错过了什么？

http://jsfiddle.net/TYjNE/1/

Answer 1

您正在使用属性选择器,但value在input更改值时不会更新该属性.

相反,循环遍历它们,只关注实际具有空值的那个:

$('input[name="userinput[]"]').each(function() {
    if ( this.value === '' ) {
        this.focus();
        return false;
    }
});

这是你的小提琴:http://jsfiddle.net/TYjNE/2/