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

Groups > comp.lang.javascript > #19039 > unrolled thread

Scope of search / reduce scope / about "this"

Back to article view | Back to comp.lang.javascript

Contents

  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

#19039 — Scope of search / reduce scope / about "this"

Hi,

Simple example:
  One element in the page should get automatically the focus.
  The way I did was to mark that element with a special tag
  and to search for it with <body onload="setFocus(document)">.

The advantage:
  is that the code is very simple; simply searching
  the HTML elements fort this concrete attribute.

The disadvantage:
  is that the whole HTML might be searched
  depending on where the element is.

Goal:
  I would like to place the "setFocus" call at a location
  where I know I have to search less elements.

  If an user clicks a button it's simple:
  example: <button onclick="setFocus(this.form)">
  As you see the scope has been reduced to this.form.

Does not work (this="window", not "table"):
[code]
  <table>
      <!--- hierarchy with some HTML elements -->
      <script language="JavaScript">
      setFocus(this);
      </script>
    </table>
[/code]

Does somebody have an Idea on how to do it?

Kind regards,
Thomas

[toc] | [next] | [standalone]

#19040

Thomas Lehmann wrote on 28 mrt 2013 in comp.lang.javascript:

> [code]
>   <table>
>       <!--- hierarchy with some HTML elements -->
>       <script language="JavaScript">

That is last century code, 
showing that you copied this from near prehistoric scripting.

>       setFocus(this);

setFocus() as a function first needs to be defined.
It is NOT a native part of Javascript.

An example:
<http://www.w3schools.com/js/tryit.asp?filename=tryjs_focus>

"this" does not refer to the element a script is in, 
only to an element an event handler is part of.

[Generic "this" could be "window" in a browser environment.]

And remember you can only set focus to an focusable element.

Try:
<input onmouseover='this.focus()' onmouseou='this.blur()'>

>       </script>
>     </table>
> [/code]
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#19041

thomas.lehmann@adtech.com wrote:
^^^^^^^^^^^^^^^^^^^^^^^^^
Please put your real name there.  And, if possible, do not post to Usenet 
via Google Groups, because of its flawed Web interface and the amount of 
spam from there; use a newsreader, like KNode or Thunderbird, instead.

> Simple example:
>   One element in the page should get automatically the focus.
>   The way I did was to mark that element with a special tag
>   and to search for it with <body onload="setFocus(document)">.

Be aware that this may look user-friendly superficially, but actually is not 
as it prevents scrolling the document with the keyboard.  If it works at 
all.
 
> The advantage:
>   is that the code is very simple; simply searching
>   the HTML elements fort this concrete attribute.
> 
> The disadvantage:
>   is that the whole HTML might be searched
>   depending on where the element is.
> 
> Goal:
>   I would like to place the "setFocus" call at a location
>   where I know I have to search less elements.
> 
>   If an user clicks a button it's simple:
>   example: <button onclick="setFocus(this.form)">
>   As you see the scope has been reduced to this.form.

Scope is a different concept, see below.
 
> Does not work (this="window", not "table"):
> [code]
>   <table>
>       <!--- hierarchy with some HTML elements -->
>       <script language="JavaScript">

  <script type="text/javascript">

in HTML 4.01, HTML5, and XHTML, and

  <script>

in HTML5 when it does not need to be backwards-compatible.

>       setFocus(this);

The “this” keyword refers to the “this” value of the (current) execution 
context.  The “this” value of the global execution context is the ECMAScript 
Global Object.  The code above is global code: code in the global execution 
context.  Therefore, “this” refers to the Global Object there, not to the 
table object.  In Web browsers, historically the ECMAScript Global Object is 
implemented or wrapped as the object representing the view the document is 
displayed in; that object has a “window” property that refers to itself.

It is a common misconception to think that the scope of an execution context 
and its “this” value would be the same thing.  The scope of an identifier is 
the part of a program in which that identifier can be resolved.  “this” is 
not an identifier, so it has nothing to do with scope.  There is a scope 
chain associated with an execution context containing references to the 
*execution* contexts in which it is embedded.  Specifically, an HTML element 
does _not_ constitute an ECMAScript execution context.

>       </script>
>     </table>

Not Valid.  The child element of a “table” element can only be a “thead”, 
“tbody”, “tfoot”, or “tr” element.

<http://validator.w3.org/>

> [/code]
> 
> Does somebody have an Idea on how to do it?

It is unclear what setFocus() does as you did not post the code, but one 
could assume that it uses a selector search.  This would be the wrong 
approach.  If it is not using a selector approach, then the reason why it 
seemingly takes long to search elements is rather that “onload” code (for 
the “load” event) is not executed before the document has been 
(*completely*) loaded.  This is a Good Thing because only then the document 
tree is ready for access via the DOM.  (But see also “DOMContentLoaded”.)

Give the element that you want to focus an ID (“id” attribute), and then use 
document.getElementById() to access the corresponding element object.

  setFocus(document.getElementById("myId"));

But if you already know the form the control is in, access the corresponding 
form object as you did, then use the form object's “elements” collection to 
access the form control:

  <body onload="setFocus(document.forms[…].elements["myControl"])" …>

or

  <… on…="setFocus(this.form.elements["myControl"])">

(For backwards compatibility you want to access the form control by its 
“name” attribute value then [same syntax].  Only if there are more controls 
of the same name, so that an ID would be more efficient/better maintainable, 
you may want to forego backwards-compatibility.)  This is also described in

  <http://jibbering.com/faq>

and

  <http://PointedEars.de/faq>.

BTW, there is de.comp.lang.javascript.

-- 
PointedEars

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

[toc] | [prev] | [next] | [standalone]

#19042

Thomas 'PointedEars' Lahn wrote:

> thomas.lehmann@adtech.com wrote:
>>       </script>
>>     </table>
> 
> Not Valid.  The child element of a “table” element can only be a “thead”,
> “tbody”, “tfoot”, or “tr” element.

To be precise, other child elements are possible, like “colgroup”.  But 
definitely not “script” elements.

<http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#h-11.2.1>
<http://www.w3.org/TR/2012/CR-html5-20121217/tabular-data.html#the-table-
element>
 
> But if you already know the form the control is in, access the
> corresponding form object as you did, then use the form object's
> “elements” collection to access the form control:
> 
>   <body onload="setFocus(document.forms[…].elements["myControl"])" …>
> 
> or
> 
>   <… on…="setFocus(this.form.elements["myControl"])">

This is not Valid.  Valid possibilities are:

  <body onload="setFocus(document.forms[…].elements['myControl'])" …>

  <body onload='setFocus(document.forms[…].elements["myControl"])' …>

  <… on…="setFocus(this.form.elements['myControl'])">

  <… on…='setFocus(this.form.elements["myControl"])'>

An attribute value delimiter cannot be used as string literal delimiter 
within that attribute value, not even as ECMAScript escape sequence.  The 
only possibility to have that is to use character and character entity 
references in the script code, which will be resolved by the markup parser 
before they get to the script engine – e.g.,

  <… on…="setFocus(this.form.elements[&quot;myControl&quot;])">
 
– or move the offending code out of the attribute value.

-- 
PointedEars

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

[toc] | [prev] | [next] | [standalone]

#19043

To Thomas

see if this helps
http://www.wufoo.com/html5/attributes/02-autofocus.html

Other than that, can't you just give it an ID and use that to set call .focus()?

[toc] | [prev] | [next] | [standalone]

#19044

Danny wrote:

> To Thomas

Which one?  (See, it *does* have advantages to post according to Usenet 
customs as laid out in the FAQ.)
 
> 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:

<http://www.w3.org/TR/2012/CR-html5-20121217/forms.html#autofocusing-a-form-
control>

Or, for the brave:
 
<http://www.w3.org/TR/html51/forms.html#autofocusing-a-form-control:-the-
autofocus-attribute>

<http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-
controls-and-forms.html#autofocusing-a-form-control:-the-autofocus-
attribute>

-- 
PointedEars

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

[toc] | [prev] | [next] | [standalone]

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

[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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web