[Solved] Autofocus issue on iPhone and iPad

[Merri]

I have a nasty issue with HTML5 autofocus attribute and iPhone/iPad. On our site we (and our customers) want the search bar to gain focus automatically. Previously we used a jQuery script to do that on DOM ready, but that had a very nasty side effect on iPad which always made the keyboard to pop up. After some searching I found out about HTML5 autofocus attribute and it works slightly better, but still not entirely right.

Now if person browses the site from page to page then things seem to be OK: no keyboard popping up. The issue is that when user first comes to the site (ie. opens a new tab) then the autofocus kicks in such a way that the keyboard pops up. This issue is worse on iPhone than iPad, but it does happen on both devices and it happens on both Safari and Chrome.

From technical standpoint I don’t want to do browser sniffing. It is easy for it to get outdated and it requires too much maintenance. I can’t take the autofocus feature away as it is a very expected thing to happen and leads to almost immediate complaining when the feature is taken off. However on touch based devices with no keyboard it is more annoying than welcome to have the autofocus. But these days even regular laptops can be touch enabled.

So: how could I find out a browser (or device) does not have a keyboard and thus it shouldn’t get autofocus? Or should I consider this autofocus behavior to be a bug on the platform and go ahead and report a bug? My initial expectation for the HTML5 attribute would be to not be as illogically annoying on tablets and phones as it is now.

[Merri]

Ended up solving using Modernizr’s media query:

(function($, M) {
    // media query for minimum of 1024 pixel device width (iPad is 960 CSS pixels)
    if(M.mq('only all and (min-width: 961px)')) {
        $(function jqueryAutofocus() {
            // automatically focus the search field
            $('#header-search [name="q"]').focus();
        });
    }
})(window.jQuery, window.Modernizr);

Now I just hope we won’t get mobile devices with over 960 CSS pixels.

[Senff]

Now I just hope we won’t get mobile devices with over 960 CSS pixels.

Well, there’s this thing called iPad, isn’t that 1024?

[chrisburton]

And laptops well over 1000px

[Merri]

@Senff: AFAIK iPad is only 1024 if you turn it landscape and if you don’t have <meta name="viewport" content="width=device-width" /> set. With this tag the media query hits the portrait width of 768px and not the 1024px even if iPad is in landscape mode. Tested this and it holds true: focus doesn’t happen even if I load a new page in landscape mode.

[chrisburton]

@Merri There’s more than one iPad. iPad mini with retina and iPad Air are 2048×1536.

[TheDoc]

iPad mini with retina is 2048×1536.

But that’s not what gets triggered in a media query.

[chrisburton]

But that’s not what gets triggered in a media query.

Can you elaborate?

[Merri]

This gets you started: https://css-tricks.com/snippets/css/retina-display-media-query/

[dyr]

This question is marked [solved] and my reply here does not address the OP’s question. It only addresses the question asked by chrisburton above.

I think what TheDoc means is that the viewport device-width values reported by HDPI devices like retina iPad for the sake of media-queries is not the full physical pixel dimensions but instead is a virtual pixel dimension that exists to allow HDPI devices to display legacy websites that don’t account for extremely dense displays.

That’s why you have questions like this one. This question asks specifically about retina iPad width.

The best way to target a retina device is by device-pixel-ratio and min-resolution as outline by Chris here or elsewhere here.

Cheers

[Senff]

My point was that if your original question is “how could I find out a browser (or device) does not have a keyboard and thus it shouldn’t get autofocus?“, you can’t rely on just screen width media queries and just target screens that are smaller than 960px.

Having a keyboard and being smaller than 960px are not mutually exclusive . So yea, your media query does not apply to iPads in landscape mode, but I figured you’d want that (I’m sure you don’t want it to apply for JUST portrait mode iPads).

[jenstrickland]

Since the HTML5 autofocus attribute is not supported on iOS (http://caniuse.com/#feat=autofocus), how are you implementing this?

[Author]

Posts