HTML5 <input> autofocus attribute inside modals

[henrywright]

Focus doesn't seem to happen when using the HTML5 autofocus attribute on a text input when the text input is inside a modal

<input type="text" class="class" name="name" value="" autofocus>

Tested in Chrome 32.0.1700.76 m using Bootstrap v3.1

[hnrch02]

That's because the modal does not get injected into the DOM dynamically but rather exists the whole time (unless you use the remote option) and is invisible. You can emulate the autofocus attribute by something similar to this.

[hnrch02]

Of course Bootstrap could implement this by just searching the modal for an input with the autofocus attribute an then, once the modal is shown, setting the focus to that element, but I don't know if the team wants that in the core.

[henrywright]

@hnrch02 tested the linked-to solution in Chrome and it works great. But doesn't seem to work on iPad.

[hnrch02]

Triggering focus on iOS seems tricky.

[henrywright]

Triggering focus on iOS seems tricky.

It does seem to be!

[delight]

At least about html5-autofocus I know that most mobile browser (besides android-firefox) ignore the autofocus attribute. It appears to be a good idea regarding the usability. In most cases you don't want to cover half the screen / web page with the virtual keyboard in the moment you load the page.

[cvrebert]

@twbs/team What are folks' thoughts on this?

[fat]

i dont think we should implement this in core for now. People should be able to easily shim this with a global listener (untested):

$(document).on('shown.bs.modal', function (e) {
  $(e.target, '[autofocus]').focus()
})

Triggering focus on iOS seems tricky.

It's also nasty because it fires the virtual keyboard which introduces a whole bunch of sadness and confusion to a user (especially if they are just triggering a modal).

[fat]

it's also one of those things, which might be worth visiting – depending if it comes up a lot – because it's pretty easy to add

[pimlottc]

@fat shouldn't that be:

     $(document).on('shown.bs.modal', function (e) {
        $('[autofocus]', e.target).focus();
      });