Question

这很可能需要涉及javascript，我几乎一无所知，所以请耐心等待。

我想要一个普通的表格，比如用引导程序设计。但是我不希望在加载页面时立即显示所有字段。相反，我想显示第一个字段，并继续显示以下字段，因为前面的字段是聚焦的或具有内容。

<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>

仅在此示例中＆＃34;名称＆＃34;当页面加载时会出现，然后当它被聚焦时，会出现＆＃34; Email＆＃34;领域会出现。

任何想法都会很棒，谢谢！

Answer 1

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

示例（这是definitley可以改进的）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

2 个答案: