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

我被标题卡住了，所以如果有人能说得更好，那就请说吧

我有一个使用引导的非常基本的表单：

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

用户名
年龄


我是
岁
年龄


我是一名医生
提交

链接：

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

首先，您只看到用户名字段和提交按钮

在用户名字段中停止键入后，年龄字段显示

选择“年龄”字段后，将显示“性别”字段

---

使用JavaScript/jQuery等是否可以实现这一点。？如果是这样，我应该在哪里寻求帮助？

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

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

});

编辑：实际上最好使用.keyup（），因为只有在元素外部单击时，.focusout才会调用

您还需要给div一个id，以便在上面的代码中

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

还可以使用.hide（）

要更改字段，可以执行以下操作

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

---

这应该足够JQuery运行了，我还没有测试过这个，但它会在它们的行上显示一些东西。

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

---

基本上，您需要隐藏稍后要显示的元素，然后将focusout回调函数绑定到用户名和年龄输入。然后，这些回调函数使用show来显示隐藏的元素。这也可以通过vanilla JS实现，但是jQuery在我看来更容易/更干净。

我的第一个想法是使用onkeypress

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

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

---

因此，当有人开始键入时，下一个元素将出现……

我认为

按键

和使用

设置超时

可能会效果最好

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

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

当然，您可以将

setTimeout

时间更改为您认为最好的时间，我使用的是1000ms

---

这里是一个演示（注意：没有花哨的引导）：

我认为

focusout

不符合“用户名字段中的输入停止后，年龄字段显示”的要求。因为所有其他表单字段都隐藏了，这会有点奇怪。可能需要对

setTimeout

和

keypress

事件进行处理据我所知，在所有键入结束时，实际上没有任何事件可用于捕获。我能想到的最接近的一个是

keyup

，但在输入每个键后都会触发。您可以使用

keyup

，然后如果输入了一定数量的字符，显示下一个字段？是的，这是正确的。您无法读取用户的想法，也无法知道何时键入已停止lol。这就是为什么我说您必须使用

setTimeout

和

keyup

我认为

setTimeout

是不必要的。假设用户键入一个字符，然后停止？那感觉有点奇怪。我的建议是读取字符串的长度，如果它大于某个阈值，则显示下一个可能的输入。您应该研究dom附加子元素并删除它们。如果要使用jquery，请查看.append（）和.remove。。非常简单。老实说，我一直被教导不要使用内联事件，JQuery通过使用元素的ID帮助保持HTML外观整洁，我认为您所展示的被认为是不好的做法。在我看来，这是不好的做法。更整洁、更容易使用JQuery，并且使设计远离代码。哥们，真的吗？这是有效的代码，它只是一个起点。您是内联执行，还是通过WhateVerisbest为您定义var x=document.getElement；x、 addEventListener。。。。。。。这不是一个生产代码，只是回答了一个关于逻辑而不是实现的问题。主要思想是“使用onkeypress，而不是onfocusout”，否则就太容易引起争论了。。。。