引导响应 - 文本字段未获得焦点

Question

我正在使用 Bootstrap 3，我的代码如下。将浏览器缩小到小屏幕视图。单击搜索图标，将出现一个搜索字段。我试图让这个文本字段获得焦点，但我没有看到它！ $("#search_field").focus(); 不工作。我认为问题在于搜索按钮本身获得了焦点，而我不知道如何将其提供给我的文本字段。救命！

HTML

<form>
    <nav class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span style="font-size:9px;">MENU</span><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                <button id="test1"  type="button" class="navbar-toggle btn-link btn-lg collapsed" data-toggle="collapse" data-target="#search_group" aria-expanded="false"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button>
                <a class="navbar-brand" href="#"></a> </div>
            <!-- end navbar-header -->

            <div id="nav" class="navbar-collapse collapse">
                <div id="navTop" class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown site-toggle" > <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span style="color:#eaab00;">Links</span> <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Test</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- end nav --> 
        </div>
        <!-- end container --> 
    </nav>
    <div class="container">
        <div class="row">
            <div id="search_group" class="navbar-collapse collapse">
                <div class="col-xs-12 input-group">
                    <input id="search_field" type="text" class="form-control" placeholder="Search the site..." />
                    <i class="glyphicon glyphicon-search form-control-feedback"></i> </div>
            </div>
            <!-- end col searchText --> 

        </div>
        <!-- end row --> 

    </div>
    <!-- end container -->
</form>

JS

$(document).ready(function () {
    $('#test1').on('click', function () {
        //$('#test1').blur();
        $("#search_field").focus();
    })
});

CSS

/* Main styles */

body { margin-top: 125px; }


/* Main Nav */

nav {
    background-color: #222222;
    height: 50px;
}

nav .dropdown-menu {border: 1px solid #00b0ca;}

/* Small screen buttons */
nav button {
     border: 0 !important;
     border-radius: 0 !important;
}
nav button[aria-expanded="true"] {background-color: #00b0ca !important;}
nav button.btn-link {
    padding-top: 12px;
}
nav button.navbar-toggle { 
     margin-top: 0;
    margin-bottom: 0;
    margin-left: 7px;
    margin-right: 0;

     width:50px;
     height:50px;
}

nav button span { color: #fff; }
nav button span.icon-bar { background-color: #fff; }
nav .navbar-toggle .icon-bar {
    width: 25px;
    margin-left: 2px;
}


/* Breadcrumbs and Search */

#search_group { 
    background-color: transparent;
    float:right;
    width:25%;
}
#search_group>div { margin: 6px 0;}



/* Small screens - iPad portrait, Phones */
 @media (max-width: 992px) {

    body { margin-top: 50px; }

    /* Breadcrumbs and Search */
    #search_group { 
        background-color:#00b0ca;
        float: none;
        width: auto;
    }
    #search_group>div { margin: 10px 0;}

}

Answer 1

$(document).ready(function () {
    $('#search_group').on('shown.bs.collapse', function () {
        $("#search_field").focus();
    })
});

https://jsfiddle.net/914sdezs/

希望对你有帮助