Home › Forums › JavaScript › [Solved] Autofocus issue on iPhone and iPad
- This topic is empty.
-
AuthorPosts
-
February 11, 2014 at 3:02 pm #162637
Merri
ParticipantI 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.
February 12, 2014 at 6:32 am #162681Merri
ParticipantEnded 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.
February 13, 2014 at 9:41 am #162770Senff
ParticipantNow 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?
February 13, 2014 at 9:45 am #162771chrisburton
ParticipantAnd laptops well over 1000px
February 13, 2014 at 1:30 pm #162820Merri
Participant@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.February 13, 2014 at 1:36 pm #162821chrisburton
Participant@Merri There’s more than one iPad. iPad mini with retina and iPad Air are 2048×1536.
February 13, 2014 at 1:38 pm #162822TheDoc
MemberiPad mini with retina is 2048×1536.
But that’s not what gets triggered in a media query.
February 13, 2014 at 1:42 pm #162824chrisburton
ParticipantBut that’s not what gets triggered in a media query.
Can you elaborate?
February 13, 2014 at 1:52 pm #162828Merri
ParticipantThis gets you started: https://css-tricks.com/snippets/css/retina-display-media-query/
February 13, 2014 at 1:59 pm #162829dyr
ParticipantThis 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
February 17, 2014 at 7:32 am #163104Senff
ParticipantMy 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).
April 4, 2016 at 12:30 pm #240222jenstrickland
ParticipantSince the HTML5 autofocus attribute is not supported on iOS (http://caniuse.com/#feat=autofocus), how are you implementing this?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.