Question

我有一个隐藏的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();
        });
    );
});

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

Answer 1

您可以使用：

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

Answer 2

你有一些错误，它们已被纠正：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在切换时设置输入`autofocus`？

2 个答案: