Focus the First Input In Any Bootstrap Modal

If you’re accepting user input in a bootstrap modal, or you just want to be more friendly to your keyboard-based users, here’s how to focus the first input element on any bootstrap modal in a global context.

$(document).on('shown.bs.modal', function (e) {
     $(e.target).find(":input").not(".close").filter(":visible:first").focus();
});

A few things are happening here:

  • A delegate event listener is placed on the document (preferably in your jQuery document ready function)
  • The event shown.bs.modal is triggered when a bootstrap modal is opened
  • We find the modal element triggering this function with e.target
  • We exclude the (X) close button from being selected
  • We focus the first visible input element (text, button, etc.) 

The nice thing about doing it this way is it applies to all popup modals across the board. It’s an easy one-size-fits-all solution for large applications!