选择或填写上一个时显示表单输入

Question

这很可能需要涉及 javascript，我对此几乎一无所知，所以请多多包涵。

我想要一个常规的表单，比如用 bootstrap 设置样式。但是我不想在加载页面时一次显示所有字段。相反，我想显示第一个字段并继续显示以下字段，因为前面的字段已聚焦或包含内容。

<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

只需隐藏表单中除第一个元素外的所有元素，侦听表单上的更改并显示与最后更改的元素相关的下一个元素（event.target）。

示例（这是明确可改进的）：

$(".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>

Answer 2

您可以使用 JQuery 删除输入焦点上的 hidden 类。

运行代码 sn-p 或查看 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>