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?

jquery html modal-dialog focus bootstrap-modal
sagar

Answers 1

Submit Answer
  • kishan patel

    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