Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19051

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

Cross-posted to 2 groups.

Followups directed to: comp.infosystems.www.authoring.html

Show key headers only | View raw

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

Thomas 'PointedEars' Lahn wrote:

> Danny wrote:
>> see if this helps
>> http://www.wufoo.com/html5/attributes/02-autofocus.html
> 
> This is not the Web, you should not post only URLs as
> suggestions/solutions. The approach suggested there is
> 
>   <input autofocus type=text>
> 
> It is a good point, though.  The relevant specification is: [HTML5 CR]

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 the 
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] <http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey>
[2] <http://www.w3.org/TR/2012/CR-html5-20121217/editing.html#the-accesskey-
attribute>
[3] <http://www.nngroup.com/articles/top-10-application-design-mistakes/>
[4] <http://www.w3.org/TR/REC-html40/struct/global.html#adef-title>
[5] <http://www.w3.org/TR/2012/CR-html5-20121217/dom.html#the-title-
attribute>
[6] <http://www.nngroup.com/articles/forms-vs-applications/>
-- 
PointedEars

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

Scope of search / reduce scope / about "this" thomas.lehmann@adtech.com - 2013-03-28 06:50 -0700
  Re: Scope of search / reduce scope / about "this" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-03-28 15:29 +0100
  Re: Scope of search / reduce scope / about "this" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-28 18:13 +0100
    Re: Scope of search / reduce scope / about "this" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-28 18:33 +0100
  Re: Scope of search / reduce scope / about "this" Danny <dann90038@gmail.com> - 2013-03-28 12:37 -0700
    Re: Scope of search / reduce scope / about "this" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-28 21:01 +0100
      HTML5 “autofocus” attribute (was: Scope of search / reduce scope / about "this") Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-29 23:27 +0100

csiph-web