如何在切换时设置输入“自动对焦”？答案

【问题标题】：How to set input `autofocus` on when it is toggle?如何在切换时设置输入“自动对焦”？
【发布时间】：2015-06-19 11:08:06
【问题描述】：

我有一个隐藏的 div。单击链接时，div 应与input 字段和下拉列表select 切换。如何在 div 向下滑动后立即输入此输入字段autofocus？

这是我隐藏DIV的HTML：

<div class="new-category-box">
    <div class="form-group">
        <input type="text" class="form-control" id="new_category" name="new_category" autofocus>
    </div>
    <div class="form-group">
        <select class="form-control" name="parentCategoryList">
            <option>-- Parent Category --</option>
            <option value="">Lorem ipsum</option>
            <option value="">Lorem ipsdffum</option>
        </select>   
    </div>      
    <div class="form-group">
        <button type="submit" class="btn btn-default">Add New Category</button>
    </div>  
</div>

我经历了这个question。但是现在这个DIV 不能切换。

这是我的 Jquery：

$( "a.add_new_category" ).click(function() {
    $( ".new-category-box" ).slideToggle(function(){
            $("#new_category").focus();
        });
    );
});

谁能告诉我这段代码有什么问题？

【问题讨论】：

你能用小提琴分享你的作品吗
尝试使用我回答中的 JavaScript。

标签： jquery html css

【解决方案1】：

您有一些错误，已更正：

$( "a.add_new_category" ).click(function() {
  $( ".new-category-box" ).slideToggle(function() {
    $("#new_category").focus();
  });
  // ); - extra stuff need to be removed!
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="new-category-box">
  <div class="form-group">
    <input type="text" class="form-control" id="new_category" name="new_category" autofocus>
  </div>
  <div class="form-group">
    <select class="form-control" name="parentCategoryList">
      <option>-- Parent Category --</option>
      <option value="">Lorem ipsum</option>
      <option value="">Lorem ipsdffum</option>
    </select>   
  </div>      
  <div class="form-group">
    <button type="submit" class="btn btn-default">Add New Category</button>
  </div>  
</div>

【讨论】：

【解决方案2】：

你可以用这个：

<input type="text" name="fname" autofocus>

【讨论】：

他的问题正是这种情况：他希望该字段自动对焦，但仅当其父 div 通过切换变为可见时。所以autofocus 没有帮助，因为即使隐藏了div，幕后的表单也会触发自动对焦，这会导致手机等出现奇怪的行为（键盘弹出，但没有地方输入）。