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/

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/