Question

我被困在标题上，所以如果有人可以更好地说出来，请做。

我使用Bootstrap有一个非常基本的形式：

<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username">
  </div>
  <div class="form-group">
    <label for="age">Age</label>
    <br>
    I'm
    <a class="action age13" href="#">13-17</a>
    <a class="action age18" href="#">18-23</a>
    <a class="action age24" href="#">24+</a>
    years old
  </div>
  <div class="form-group">
    <label for="gender">Age</label>
    <br>
    I'm a
    <a class="action girl" href="#">girl</a>
    <a class="action guy" href="#">guy</a>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

链接： http://www.bootply.com/UmxZswdXUG

在加载时，您可以立即看到表单的所有3个部分，但我想更改它以便：

首先，您只会看到用户名字段和提交按钮。
在用户名字段中输入停止后，将显示年龄字段。
选择年龄字段后，会显示性别字段。

这可能使用JavaScript / jQuery等吗？如果是这样，我应该在哪里寻求帮助？

Answer 1

您可以尝试使用.focusout（）事件作为用户名

$("#username").focusout(function() {

});

编辑：使用.keyup（）实际上可能更好。因为.focusout只会在您点击元素外部时调用。

http://api.jquery.com/keyup/

你还需要给div一个id，所以在上面的代码中你可以把

$("#myAgeField").show();

您也可以使用.hide（）;

要更改您可以执行的字段

$("#cboMyAge").change(function() {
    $("#myGenderField").show()
});

这应该是足够的JQuery来实现它，我没有对它进行过测试，但它会看起来就像它们一样。

Answer 2

我的第一个想法是使用onkeypress。

首先使用css隐藏它们，然后添加如下内容：

<element onkeypress="this.nextElementSibiling.style.display = 'block';">

因此，当有人开始输入时，下一个元素将显示....

Answer 3

这些链接应该包含您需要的一切：

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/keyup/

http://api.jquery.com/focusout/

基本上，您需要隐藏稍后要显示的元素，然后将focusout回调函数绑定到用户名和年龄输入。然后这些回调函数使用show来显示隐藏的元素。这也可以用vanilla JS完成，但jQuery更容易/更清洁IMO。

Answer 4

我认为keypress并使用setTimeout可能效果最佳。

var t;
$('#username').on('keypress', function(){
  clearTimeout(t);

  t = setTimeout(function(){
    $('.form-group:eq(1)').fadeIn();
  }, 1000);
});

当然，您可以将setTimeout时间更改为您认为最合适的任何内容，我使用的是1000毫秒。

这是一个演示（注意：没有花哨的Bootstrap）：demo

JavaScript / jQuery隐藏表单部分，直到上一个完成

4 个答案: