How to set the focus for a particular field in a Bootstrap modal, once it appears How to set the focus for a particular field in a Bootstrap modal, once it appears javascript javascript

How to set the focus for a particular field in a Bootstrap modal, once it appears


Try this

Here is the old DEMO:

EDIT:(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)

$(document).ready(function() {    $('#modal-content').modal('show');    $('#modal-content').on('shown', function() {        $("#txtname").focus();    })});

Starting bootstrap 3 need to use shown.bs.modal event:

$('#modal-content').on('shown.bs.modal', function() {    $("#txtname").focus();})


Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".

$('#themodal').on('shown.bs.modal', function () {   $("#txtname").focus();});

or put the focus on the first visible input like this:

.modal('show').on('shown.bs.modal', function (){    $('input:visible:first').focus();})

http://getbootstrap.com/javascript/#modals


I am using this in my layout to capture all modals and focus on the first input

  $('.modal').on('shown', function() {     $(this).find('input').focus();  });