Question

我有一个包含多个输入字段的表单 - 第一个始终显示，如果它获得焦点，则应显示其余部分;然后，如果输入字段的所有失去焦点，表单应该返回到仅显示第一个输入字段（这是显示的开头。）我已经与各种焦点/模糊搏斗JS中的事件，无法弄清楚如何使这项工作。

<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 input”并模糊到“.myform”，尝试将光标从#a移动到#b，模糊触发#a，冒泡到处理程序.myform，立即隐藏#b，现在我无法检查#b是否获得焦点或整个表单是否丢失了它。

我在这里缺少什么？

Answer 1

尝试这种方式

DEMO

 $("#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();
      }      
  });
}));

如何使用Javascript使用表单的一个输入字段来显示其余的？

1 个答案: