Focus on Input Field on Modal Open

I have a modal that opens on page load. I need to set the focus on the textbox. I tried using several codes that I had searched but It does not work. Here is my js:

$(document).ready(function(){
        $("#myModal").modal('show', function() {
        $('#keyword', this).focus();
    });

});

And my input field is this

<input type="text" style="width: 50%; margin-left:2px; " id="keyword"               class="input-group inline form-control search" name="keyword" placeholder="Search" ng-model="keyword" ng-required="true" required >

What could be the problem?

Answers 1

  • It's simple, just change .on("show" into .on("shown.bs.modal" :D

    See further reference about bootstrap's modal events here: http://getbootstrap.com/javascript/#modals-events

    EDIT:

    This should work like you want: :D Sorry I wasn't read your question carefully ...

    $(document).ready(function() {
    
        //to have your input focused every your modal open
        $('#myModal').on("shown.bs.modal", function() {
            $('#keyword').focus();
        });
    
        //to open the modal when document is ready
        $("#myModal").modal('show');
    });
    

    Addition:

    If you want to focus on first .form-control inside the modal:

    $(document).ready(function() {
        $('#myModal').on("shown.bs.modal", function() {
            $(this).find(".form-control:first").focus();
        });
        $("#myModal").modal('show');
    });
    

Related Articles