6

这是我当前的 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语句检查它。然后，如果没有一个为空，则添加一个新的。

这是一种适当的检查方式，还是有人有更好的想法？

4

4 回答 4

6

试试下面的代码：

$(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/。

于 2012-05-02T17:34:37.753 回答
0

当所有字段都填满时，首先隐藏您想要添加的内容......然后当最后一个字段使用键侦听器调用一个函数并在该函数中使该字段可见时

于 2012-05-02T17:21:05.563 回答
0

试试这个：

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() });​
于 2012-05-02T17:43:56.413 回答
0

好吧，看看这个 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旧版浏览器不支持。那好吧...

于 2012-05-02T17:53:23.427 回答