How do I make a form field take focus ?

A

Aaron Gray

I want to make a form field take focus ideally coded in the form :-

<form method="post" action="index.php?action=newname">
<input type="text" name="name" size="40" value="" />
<input type="submit" name="submit" value="Create" />
</form>

Many thanks in advance,

Aaron
 
S

Steve Swift

Aaron said:
I want to make a form field take focus ideally coded in the form :-
<form method="post" action="index.php?action=newname">
<input type="text" name="name" size="40" value="" />
<input type="submit" name="submit" value="Create" />
</form>

This is how I'd do it, using JavaScript: (I know of no simple HTML solution)

1. Add a name to your form: <form name=myform method=...
2. Add the following to give focus to your "name" field:

<SCRIPT>document.myform.name.focus()</SCRIPT>

In place of "document" you can use "this" if you prefer, because your
script is inside the document, so "this" knows where to operate.
The [name] in the script is the ["name"] from your type="text" control;
nothing to do with the "name" in "name=" found in both your controls. So
if you'd used [name="person"] your script would be
document.myform.person.focus(). The references are case sensitive, so
neither "Myform" nor "Name" would work in your script.

I don't know if there are any rules on where the SCRIPT should go. I put
it just after the form, or even inside the form. Nothing (other than
some of the people around here!) seems to care.

The script itself conforms to the mathematical condition of "necessary
and sufficient". It contains everything that is necessary to make it
work, and nothing that exceeds what is sufficient to make it work.
 
B

Bart Van der Donck

Steve said:
This is how I'd do it, using JavaScript: (I know of no simple HTML solution)

You're right, HTML only cannot achieve this.
1. Add a name to your form: <form name=myform method=...

That is a possible way, but there is no need to give the form a name
(see further).
2. Add the following to give focus to your "name" field:

<SCRIPT>document.myform.name.focus()</SCRIPT>

I would avoid using 'name' as an element's name; at one point or
another it may interfere with the reserved word 'name'.
In place of "document" you can use "this" if you prefer, because your
script is inside the document, so "this" knows where to operate.

I would always use 'document' (but that might be my personal
preference)
The [name] in the script is the ["name"] from your type="text" control;
nothing to do with the "name" in "name=" found in both your controls. So
if you'd used [name="person"] your script would be
document.myform.person.focus(). The references are case sensitive, so
neither "Myform" nor "Name" would work in your script.

I don't know if there are any rules on where the SCRIPT should go. I put
it just after the form, or even inside the form.

Best practice is to do:

<body onLoad="document.forms[0].elements['myname'].focus()">

because onLoad is explicitly executed just after the whole page is
loaded.

Best practices in form referencing:
http://www.javascripttoolbox.com/bestpractices/#forms
 
S

Steve Swift

Bart said:
Best practice is to do:
<body onLoad="document.forms[0].elements['myname'].focus()">

because onLoad is explicitly executed just after the whole page is
loaded.

I can see that it is a good idea to give the element the focus after you
are sure that it is there to receive the focus.
On the other hand, from the "School of practical experience" I've never
seen that giving the element the focus from a script placed after the
end of the form causes any problems, and with some browsers allows the
user to start typing the instant the form appears, without having to
click in the focussed field.

This is the benefit of being two-faced - I can see both sides of arguments.
 
T

Thomas 'PointedEars' Lahn

The required `type' attribute is missing.
[...]
In place of "document" you can use "this" if you prefer, because your
script is inside the document, so "this" knows where to operate.

I would always use 'document' (but that might be my personal
preference)

No, Steve's reasoning is wrong. `this' refers to the Activation Object.
That may or may not be the object that has `document' as its property.
Using `document' instead, the scope chain is traversed until for the first
object that has that property.
I don't know if there are any rules on where the SCRIPT should go. I put
it just after the form, or even inside the form.

Best practice is to do:

<body onLoad="document.forms[0].elements['myname'].focus()">

because onLoad is explicitly executed just after the whole page is
loaded.

Very true. Whereas `onLoad' should be `onload', as it is better for several
reasons I already mentioned before. And the reference worm should be at
least shortened; it would be necessary to determine whether focus() would be
successful.


PointedEars
 
T

Thomas 'PointedEars' Lahn

[this supersedes my previous followup]

The required `type' attribute is missing.
[...]
In place of "document" you can use "this" if you prefer, because your
script is inside the document, so "this" knows where to operate.

I would always use 'document' (but that might be my personal preference)

No, Steve's reasoning is wrong. `this' refers to the Activation Object.
That may or may not be the object that implements HTMLDocument or its
equivalent. Using `document' instead, the scope chain is traversed until
for the first object that has that property.
I don't know if there are any rules on where the SCRIPT should go. I
put it just after the form, or even inside the form.

Best practice is to do:

<body onLoad="document.forms[0].elements['myname'].focus()">

because onLoad is explicitly executed just after the whole page is
loaded.

Very true. Whereas `onLoad' should be `onload', as it is better for several
reasons I already mentioned before. And the reference worm should be at
least shortened; it would be necessary to determine whether focus() would be
successful.


PointedEars
 
A

Aaron Gray

Aaron Gray said:
I want to make a form field take focus ideally coded in the form :-

<form method="post" action="index.php?action=newname">
<input type="text" name="name" size="40" value="" />
<input type="submit" name="submit" value="Create" />
</form>

Okay I have done a 'document.form[0].name.focus()' on body onload.

Also I have added a :-
onfocus="this.select()"
to the fields element.

Is this really necessary, I found it in some other code.

Thanks all,

Aaron
 
T

Thomas 'PointedEars' Lahn

Randy said:
Thomas 'PointedEars' Lahn said the following on 1/22/2008 7:09 AM:
The required `type' attribute is missing.

That's nice[1]. Irrelevant as well.

It isn't, stupid.
I don't know if there are any rules on where the SCRIPT should go. I
put it just after the form, or even inside the form.
Best practice is to do:

<body onLoad="document.forms[0].elements['myname'].focus()">

because onLoad is explicitly executed just after the whole page is
loaded.
Very true. Whereas `onLoad' should be `onload', as it is better for several
reasons I already mentioned before.

There is no difference in the two when it is in HTML code. I have
already explained that to you. No difference what-so-ever. Just
something you seem to prefer and want everybody else to do it Thomas'
way. It can be anything from onload to ONLOAD and as long as it is
spelled correctly, no browser *can* care because HTML is case insensitive.

I have pointed out before that HTML is not per se case-insensitive.
Regardless, I have explained why it is not merely my preference that
makes this suggestion a sound one. But you are too stupid to read,
let alone comprehend what was written.
"Reference worm"? Is that another Thomas-word?

It is yet another thing that you fail to understand.
it would be necessary to determine whether focus() would be successful.

True, and we know that is impossible [...]

If you know that it is impossible, you have some unlearning to do, because
that is wrong.


PointedEars
 
L

Laurent vilday

Randy Webb a écrit :
It is easy to prove me wrong though. Post a script that will determine
if an arbitrary form element can be focused or not.

<input type="text" onfocus="this.blur()" name="inputYouCantFocus">

There is too many way allowing us to hide and/or prevent the focus on an
element, let me add a few to the list.

1) the obvious <input type="hidden">

2) <input disabled="disabled">

3) <input style="opacity:0">

4) <input style="position:absolute;clip:rect(0,0,0,0)">

5)
<div style="overflow:hidden;width:0;height:0">
<input>
</div>

6)
<div style="position:absolute;z-index:1;width:300px;height:100px">
<input style="width:100px">
</div>
<div style="position:absolute;z-index:2;width:300px;height:100px;
background-color:red"></div>

7) with this one, the focus can occur only with a mouse. You got a
keyboard only, you are screwed and can't focus it at all. How a script
would be able to determine if the second input is focusable ?
<input>
<input tabindex="-1">

and many many more tricky ways to hide anything we want.
Happy scripting!

:D
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top