HTML5 ?autofocus? attribute (was: Scope of search / reduce scope / about "this")

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

[X-Post comp.infosystems.www.authoring.html, comp.lang.javascript;
 F'up2  comp.infosystems.www.authoring.html]

Thomas 'PointedEars' Lahn wrote:

Quoted text here. Click to load it

It turns out that (at least in Chromium 25.0.1364.160 Debian 7.0 (186726))  
the ?autofocus? attribute causes the same usability issues as the focus()  
method when called in a ?load? event listener: The document cannot be  
scrolled using the arrow keys.  [Also, the control thus focused may still  
not be visible.  This would need to be worked around with the  
scrollIntoView() method, which may not be available or functional, in a  
?load? event listener.]

So this attribute is best avoided as well.

Instead, the following approach is recommended:

  <input type="search" name="search" id="search" accesskey="x"
         placeholder="Description (shortcut: Access Key + X)"
         title="More verbose description (shortcut: Access Key + X)">

The ?accesskey? attribute, which allows to use a keyboard shortcut so that  
the control receives the input focus, was introduced with HTML 4 [1] and is  
also supported in HTML5 (CR) [2].  The actual shortcut that focuses the  
control varies among browsers.  In Chromium 25.0.1364.160 Debian 7.0  
(186726) with a QWERTZ keyboard layout, it is <Alt> + <Shift> + <case-
insensitive value of the ?accesskey? attribute>.

The ?placeholder? attribute and [the ?type? attribute value further show
affordance [3] of the control.  They can be augmented with a suitable  
?cursor? CSS property value.]  Should the ?placeholder? attribute not be
supported (HTML 4), the ?title? attribute (HTML 4+) can provide the  
description, perhaps (but not necessarily) as a tooltip  [4, 5].  [It is  
also common and recommended to put a short, unobtrusive (e.g, darkgray)  
descriptive text above, next to, or below the control [6]; but whether this  
is suitable for you depends on the viewport dimensions and other factors.]

[1] <
[2] <
[3] <
[4] <
[5] <
[6] <

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Site Timeline