Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Set focus on First text field, if any

Reply
Thread Tools

Set focus on First text field, if any

 
 
Bill H
Guest
Posts: n/a
 
      08-29-2007
Can someone tell me where I could find a JavaScript example of setting
the focus to the first form text field, if t here is on, on a web page
when it is loaded in the browser?

Bill H

 
Reply With Quote
 
 
 
 
Bart Van der Donck
Guest
Posts: n/a
 
      08-29-2007
Bill H wrote:

> Can someone tell me where I could find a JavaScript example of setting
> the focus to the first form text field, if t here is on, on a web page
> when it is loaded in the browser?


for (f=0; f<document.forms.length; f++)
for (x=0; x<document.forms[f].length; x++)
if (document.forms[f].elements[x].type == 'text') {
document.forms[f].elements[x].focus()
return
}

Hope this helps,

--
Bart

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      08-29-2007
On Aug 29, 9:36 pm, Bill H <(E-Mail Removed)> wrote:
> Can someone tell me where I could find a JavaScript example of setting
> the focus to the first form text field, if t here is on, on a web page
> when it is loaded in the browser?



You could try Googling for "javascript focusfirst" but the results
were unimpressive, you might try something like:

window.onload = function(){
var el, inputs = document.getElementsByTagName('input');
for (var i=0, len=inputs.length; i<len; i++) {
el = inputs[i];
if (el.type == 'text' && el.focus) {
el.focus();
return;
}
}
}

Don't forget to add feature detection and account for other handlers
that might be added onload.


--
Rob

 
Reply With Quote
 
Stevo
Guest
Posts: n/a
 
      08-29-2007
Bart Van der Donck wrote:
> Bill H wrote:
>> Can someone tell me where I could find a JavaScript example of setting
>> the focus to the first form text field, if t here is on, on a web page
>> when it is loaded in the browser?

>
> for (f=0; f<document.forms.length; f++)
> for (x=0; x<document.forms[f].length; x++)
> ...
>
> Hope this helps,
> Bart


Beware Bill, if you use that directly it'll create (or more importantly
overwrite) global variables f and x. Try the following first two lines
instead:

for (var f=0; f<document.forms.length; f++)
for (var x=0; x<document.forms[f].length; x++)
 
Reply With Quote
 
Bill H
Guest
Posts: n/a
 
      08-29-2007
On Aug 29, 8:19 am, Bart Van der Donck <(E-Mail Removed)> wrote:
> Bill H wrote:
> > Can someone tell me where I could find a JavaScript example of setting
> > the focus to the first form text field, if t here is on, on a web page
> > when it is loaded in the browser?

>
> for (f=0; f<document.forms.length; f++)
> for (x=0; x<document.forms[f].length; x++)
> if (document.forms[f].elements[x].type == 'text') {
> document.forms[f].elements[x].focus()
> return
> }
>
> Hope this helps,
>
> --
> Bart


Thanks Bart, RobG. I tried googling, but google sometimes leaves a lot
to be desired (so much fluff, not much substance).

Instead of using an Onload, would either of these routines be safe
running before the </HTML> tag (after </BODY>) or is there still a
chance that the page hasn't rendered in the browser? Is there a actual
set rule on when things are rendered into the browser or is it first
come first serve?

Bill H

Bill H

 
Reply With Quote
 
Bart Van der Donck
Guest
Posts: n/a
 
      08-29-2007
Bill H wrote:

> Thanks Bart, RobG. I tried googling, but google sometimes leaves a lot
> to be desired (so much fluff, not much substance).
>
> Instead of using an Onload, would either of these routines be safe
> running before the </HTML> tag (after </BODY>)


That would not be a good practice. Just before </BODY> would be "a bit
better" practice, but still not recommended.

> or is there still a chance that the page hasn't rendered in the browser?


Yes, there is.

> Is there a actual set rule on when things are rendered into the browser
> or is it first come first serve?


Yes, the general rule is first come first served - but there might be
exceptions.

The recommended way is onLoad.

--
Bart

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-29-2007
On Aug 29, 10:37 pm, Bill H <(E-Mail Removed)> wrote:
[...]
> Thanks Bart, RobG. I tried googling, but google sometimes leaves a lot
> to be desired (so much fluff, not much substance).
>
> Instead of using an Onload, would either of these routines be safe
> running before the </HTML> tag (after </BODY>)


Mostly, yes. There may be some browsers that won't like it so could
perhaps add :

if (!document || !document.getElementsByTagName ) return;

feature testing to the code I posted. At worst, it will simply not
focus on the element.

> or is there still a
> chance that the page hasn't rendered in the browser?


You have no way of knowing for sure, by adding the above test, at
least you ensure graceful degradation.


> Is there a actual
> set rule on when things are rendered into the browser or is it first
> come first serve?


Markup and code is parsed it arrives, most browsers will display
content as they can, even if the layout is not final. Users have
shown a preference for browsers that do so, so that is what they do.


--
Rob

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-29-2007
On Aug 29, 11:05 pm, RobG <(E-Mail Removed)> wrote:
> On Aug 29, 10:37 pm, Bill H <(E-Mail Removed)> wrote:

[...]
> > Instead of using an Onload, would either of these routines be safe
> > running before the </HTML> tag (after </BODY>)

>
> Mostly, yes.


Wrong, I should have said no - keep it before the closing body tag,
script elements must be in the head or body, not outside.


--
Rob

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      08-29-2007
RobG wrote:
> On Aug 29, 9:36 pm, Bill H <(E-Mail Removed)> wrote:
>> Can someone tell me where I could find a JavaScript example of setting
>> the focus to the first form text field, if t here is on, on a web page
>> when it is loaded in the browser?

>
> [...]
> window.onload = function(){
> var el, inputs = document.getElementsByTagName('input');
> [...]
> }


<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function handleLoad()
{
// ...
}
</script>
</head>

<body onload="...">
...
</body>

should be used instead, to avoid the proprietary, and therefore inherently
unreliable `onload' property. I'd also recommend Bart's solution instead,
because it is backwards-compatible to DOM Level 0, and it has been
established per the OP's question that the `input' element is a descendant
of `form'.

> Don't forget to add feature detection and account for other handlers
> that might be added onload.


Event handlers cannot be added, they are built-in to a DOM. `onload' is
*the* event handler for the `load' event. Other event *listeners* could
be added (for that event), though.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      08-29-2007
Thomas 'PointedEars' Lahn wrote:
> <head>
> ...
> <meta http-equiv="Content-Script-Type" content="text/javascript">
> <script type="text/javascript">
> function handleLoad()
> {
> // ...
> }
> </script>
> </head>
>
> <body onload="...">


<body onload="handleLoad()">

> ...
> </body>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
this.window.focus() vs. window.focus() vs. this.focus() Roger Javascript 3 03-08-2007 08:53 PM
501 PIX "deny any any" "allow any any" Any Anybody? Networking Student Cisco 4 11-16-2006 10:40 PM
Why does putting focus on textbox also set focus to submit jw56578@gmail.com Javascript 2 06-06-2005 08:20 PM
Set cursor in first text box and set button as default SibAndela ASP General 1 09-26-2004 06:31 PM
any manual focus cameras easy to focus? Catherine Jo Morgan Digital Photography 6 11-05-2003 06:36 PM



Advertisments