0

I am using Bootstrap 3, my code is below. Shrink your browser to a small screen view. Click the Search icon, a search field will appear. I am trying to make this textfield receive focus, but I don't see it! $("#search_field").focus(); is not working. I think the problem is because the search button itself gets the focus, and I don't know how to give it to my textfield. Help!

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

}
Siguza
  • 21,155
  • 6
  • 52
  • 89
janeh
  • 3,734
  • 7
  • 26
  • 43
  • If you use bootstrap's JS, it adds a few transition elements - maybe you need to wait until the transition ends before giving focus? See http://stackoverflow.com/questions/15914760/how-to-listen-to-the-end-of-a-bootstrap-animation – Michael Tallino Jul 27 '15 at 22:18
  • How do I check if a transition has ended? (I don't know what kind of transition to check for. ) I don't want to rely on a timer. – janeh Jul 27 '15 at 23:57
  • What's weird is that if I invoke focus from a random link on a page - it works. – janeh Jul 28 '15 at 00:33
  • Try: `$.support.transition = false` at the top of your JS and see if that changes anything (turning off Bootstrap transitions) – Michael Tallino Jul 28 '15 at 00:50

1 Answers1

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

https://jsfiddle.net/914sdezs/

Hope this is of help

QGA
  • 3,114
  • 7
  • 39
  • 62