以前に選択または入力したときにフォーム入力を公開する

Question

これはほとんどの場合、javacriptを使用する必要があります。

私は定期的なフォームを持っていたいと思います。しかし、私は、ページがロードされたときにすべてのフィールドを一度に表示したくありません。代わりに、私は最初のフィールドを表示し、前のフィールドがフォーカスされているか、その中に内容があるので、次のフィールドを表示し続けたいと思います。この例だけで「名前」まで表示されるでしょうに

<form action="" method="post"> 
    <div class="form-group"> 
     <label for="name">Name</label> 
     <input type="text" name="name" class="form-control"> 
    </div> 
    <div class="form-group"> 
     <label for="email">Email</label> 
     <input type="email" name="email" class="form-control"> 
    </div> 
    <div class="form-group"> 
     <label for="website">Website</label> 
     <input type="text" name="website" class="form-control"> 
    </div> 
    <div class="form-group"> 
     <label for="message">Message</label> 
     <textarea name="message" class="form-control" rows="5"></textarea> 
    </div> 
</form> 

、それはその後、フォーカスされたときに、ページのロードが、その後、「電子メール」フィールドが現れます。

素晴らしいアイデアです。

Answer 1

入力フォーカスでhiddenクラスを削除するためにJQueryを使用できます。

実行コードスニペットやCodePen Demoをチェックアウト：

$(document).ready(function() { 
 
    $("input").focus(function() { 
 
    $(this).parent(".form-group").next().removeClass("hidden"); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<form action="" method="post"> 
 
    <div class="form-group"> 
 
    <label for="name">Name</label> 
 
    <input type="text" name="name" class="form-control"> 
 
    </div> 
 
    <div class="form-group hidden"> 
 
    <label for="email">Email</label> 
 
    <input type="email" name="email" class="form-control"> 
 
    </div> 
 
    <div class="form-group hidden"> 
 
    <label for="website">Website</label> 
 
    <input type="text" name="website" class="form-control"> 
 
    </div> 
 
    <div class="form-group hidden"> 
 
    <label for="message">Message</label> 
 
    <textarea name="message" class="form-control" rows="5"></textarea> 
 
    </div> 
 
</form> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

だけフォームとディスプレイ上の変化を聞き、最初のものを除いて、フォーム内のすべての要素を非表示最後に変更された要素に関連する次の要素（event.target）。 （definitley改善可能である）

例：これは完璧です

$(".form-group:not(:first-child)").hide(); 
 
$("form").on("change keypress paste", function (event) { 
 
    $(event.target).parent().next().show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post"> 
 
    <div class="form-group"> 
 
     <label for="name">Name</label> 
 
     <input type="text" name="name" class="form-control"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="email">Email</label> 
 
     <input type="email" name="email" class="form-control"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="website">Website</label> 
 
     <input type="text" name="website" class="form-control"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="message">Message</label> 
 
     <textarea name="message" class="form-control" rows="5"></textarea> 
 
    </div> 
 
</form>