当所有先前的字段填写，添加新的输入字段

Question

这是我目前的HTML和CSS代码：

<form method="post" id="achievementf1" action=""> 
    <span>1.</span> 
    <input type="text" name="achievement1" id="achievement1" /> 
    <br /> 
    <span>2.</span> 
    <input type="text" name="achievement2" id="achievement2" /> 
    <br /> 
    <span>3.</span> 
    <input type="text" name="achievement3" id="achievement3" /> 
    <br />      
    <input type="submit" name="submit1" value="Registrate" /> 
    </form> ​ 

#border #info-box #info #box input[type="text"] { 
    float: left; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    height: 25px; 
    width: 650px; 
    outline: none; 
} 
#border #info-box #info #box input[type="submit"] { 
    margin-left: 500px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    height: 35px; 
    color: #fff; 
    font-size: 20px; 
    border: 2px solid #fff; 
    border-radius: 8px 8px 8px 8px; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 3px; 
    cursor: pointer; 
}​ 

您可以在http://jsfiddle.net/mzNtj/2/看到它的行动。我想知道如何在所有其他人填充完成后自动添加新的输入字段。我有一个基本的想法，阅读每个字段的值，并用if声明来检查它。然后，如果没有空的，则添加新的。

这是一个合适的方式来检查，或者有没有人有更好的想法？

Answer 1

试试下面的代码：

$(function(){ 
    $(document).on("change","input", function(){ 
     var allGood=true; 
     var lastInputField=0; 
     $("input").each(function() { 
      if ($(this).val() =="") { 
       allGood=false; 
       return false; 
      } 
      lastInputField++; 
     }); 

     if (allGood) { 
      $("<span>" + lastInputField + "<input type='text' id='lastinputfieldId" + lastInputField +"'" + 
       "name='lastinputfieldName" + lastInputField + "'></span>").appendTo("form"); 
     } 
    }); 
}); 
​ 

演示：http://jsfiddle.net/mzNtj/3/。

Answer 2

第一躲要当填写了所有字段添加什么都... 然后当最后一个字段是使用按键侦听器，并在该函数调用一个函数使该场可见

Answer 3

试试这个：

http://jsfiddle.net/F8qR2/

代码：

function AllInputsFilled() { 
    return $("input[type='text']", $("#achievementf1")).filter(function() { 
     return $(this).val().trim() === ""; 
    }).size() === 0; 
} 

function AdditionEvent() { 
    if (AllInputsFilled()) { 
     AddInput();  
    } 
} 

function AddInput() { 
    var cnt = $("input[type='text']", $("#achievementf1")).size() + 1; 
    $("<br><span>" + cnt + "</span><input type='text' name='achievement" + cnt+ "' id='achievement" + cnt+ "' />").insertAfter("#achievementf1 input[type='text']:last"); 
    $("input", $("#achievementf1")).unbind("keyup").bind("keyup", function(){ AdditionEvent() }); 

} 

$("input", $("#achievementf1")).bind("keyup", function(){ AdditionEvent() });​ 

Answer 4

好吧，看看这个的jsfiddle：http://jsfiddle.net/Ralt/mzNtj/4/

阅读用心的意见，了解什么此代码确实如此：

// First, listen for the "onkeypress" event instead of the "blur" or "change". 
// Why? For the UX, since the user will think he can click the submit 
// button as soon as the third field is filled in if you use the "blur" or 
// "change" event. 
document.forms[ 'achievementf1' ].onkeypress = function(e) { 
    // Some cross-browser handling 
    var e = e || window.event, 
     target = e.target || e.srcElement; 

    // If the target is an INPUT 
    if (target.nodeName === 'INPUT') { 

     // Now here is the tricky part: 
     // The "every" method returns false if *one* callback returns false, 
     // otherwise it returns true. 
     // And we use !! to check if it's not empty. 
     var allNotEmpty = [].every.call(this.elements, function(el) { 
      return !!el.value; 
     }) 

     // If it's true, it means all the fields are not empty 
     if (allNotEmpty) { 

      // So let's create an input 
      var newInput = document.createElement('input') 
      // Set some properties 
      // And then... insert it before the submit button :-) 
      this.insertBefore(newInput, this.elements[ 'submit1' ]); 
     } 
    } 
} 

我知道，我的代码很奇怪，因为我关心跨浏览器来处理事件，但旧版浏览器不支持every。哦，以及...