如何使用Javascript使用表單的一個輸入字段顯示其余內容？

Question

我有一個包含多個輸入字段的表單-始終顯示第一個字段，如果它獲得焦點，則應該顯示其余字段； 然后，如果所有輸入字段都失去焦點，則該表單應返回到僅顯示第一個輸入字段（這是開始顯示的內容。）我已經嘗試了JS中的各種焦點/模糊事件，並且可以t弄清楚如何進行這項工作。

<form class='myform'>
  <input id='a' placeholder="This is always visible"></input>
  <input id='b' placeholder="Not shown till #a is selected"></input>
</form>
<div class='outside'>
  Let's say, when you click here, or use tab keypresses to leave the above input fields, after you were in either input field, the form should then only shown input#a.
</div>

我知道當第一個焦點出現時如何顯示字段。 但是，當焦點完全離開表單時，我無法精確確定在哪里綁定blur()事件，因此我知道我已經失去了所有輸入字段的焦點。

到目前為止，我的嘗試是：將焦點綁定到“ .myform輸入”，將模糊綁定到“ .myform”，嘗試將光標從#a移至#b，模糊觸發於#a上，直到到達.myform的處理程序，立即隱藏#b，現在我無法檢查#b是否獲得焦點或整個表單是否丟失了焦點。

我在這里想念什么？

Answer 1

嘗試這種方式

演示

 $("#b").hide();
$(document).ready((function(){
  $( document ).on( "click  keydown", function() {
      if($("#a").is(":focus")){
          $("#b").show();
      }
      else if($("input").is(":focus")){
           //there is some input with focus.. if you want to manage this situation code goes here
      }
      else{
          $("#b").hide();
      }      
  });
}));