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

すべてのフィールドが入力されたら、最初に追加したいものを非表示にします...次に、最後のフィールドがキーリスナーを使用して1つの関数を呼び出し、その関数でそのフィールドを表示します

于 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 に答える