Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#5065 closed enhancement (fixed)

Search field on http://www.openstreetmap.org should autofocus

Reported by: Vinnl Owned by: rails-dev@…
Priority: minor Milestone:
Component: website Version:
Keywords: Cc:

Description

Currently, when I open http://www.openstreetmap.org there is no way to interact with it directly using the keyboard. Since the most frequent action will likely be to search for a destination, the search field should receive the HTML autofocus attribute[1]. Apparently this was added to the previous website as well: #3797

[1] http://diveintohtml5.org/forms.html#autofocus

Change History (6)

comment:1 Changed 6 years ago by Tom Hughes

I have to say I remain entirely unconvinced by the claim that the first thing most people will do is to search. That might possibly be true for new users but I very much doubt it is for returning users.

What I can say is that overall we have five times more visitors to the front page than we do searches, and that includes all searches not just those made immediately after arriving on the front page.

The real problem however, given that regardless of how important you think this is there is little real downside, is that the new site design includes placeholder text in the search field which will, to some extent, conflict with autofocusing.

What I'm not sure about yet is how much. Certainly in Firefox at least it appears to be safe to use HTML5 autofocus as no focus event will be generated (that would fade out the placeholder) until the user starts to type. Whether that is true in other browsers needs to be determined.

In older browsers we used to focus via javascript instead, but that would almost certainly generate a focus event. Then again I guess the placeholder text (which is generated by an HTML5 placeholder attribute) may not show there anyway.

comment:2 Changed 6 years ago by Tom Hughes

An update following some browser testing:

Firefox 25 - HTML5 autofocus preserves placeholder
Chrome 31 - HTML5 autofocus preserves placeholder
Opera 12 - HTML5 autofocus loses placeholder
IE 8 - No placeholder shown, needs JS autofocus

Opera 12 isn't a major issue as I'm guessing the new webkit based version will do what Chrome does, and likely Safari will as well. Would be good to know what later IEs do.

comment:3 Changed 6 years ago by Tom Hughes

Update:

IE10 - No placeholder shown, needs JS autofocus
Safari - HTML5 autofocus preserves placeholder

Last edited 6 years ago by Tom Hughes (previous) (diff)

comment:4 Changed 6 years ago by Tom Hughes

It seems IE11 does show the placeholder but (a) removes it on focus rather than when you start typing and (b) doesn't support the autofocus attribute.

comment:5 Changed 6 years ago by Tom Hughes

Resolution: fixed
Status: newclosed

Fixed in 9cc9a00/rails.

comment:6 Changed 6 years ago by Vinnl

Thanks TomH, looks great. I must admit that I'm a new user, but as such, I'm loving this.

Note: See TracTickets for help on using tickets.