CODEWITHSUNDEEP
jqueryhtmlmodal-dialogfocusbootstrap-modal
bleyk
bleyk

Reputation: 799

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?

Upvotes: 0

Views: 7684

Answers (1)

Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

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

Upvotes: 3

Related Questions