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/

Answer 2

以下代码将帮助您查找表单上所有输入字段列表中是否有任何第一个输入字段为空。

 $(document).ready(function(){

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

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

我希望你想要这个。它可以帮助您找到第一个空场。这是小提琴退房。 http://jsfiddle.net/TYjNE/4/

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

2 个答案: