How do I make a form field take focus ?

Discussion in 'Javascript' started by Aaron Gray, Jan 22, 2008.

  1. Aaron Gray

    Aaron Gray Guest

    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
     
    Aaron Gray, Jan 22, 2008
    #1
    1. Advertising

  2. Aaron Gray

    Steve Swift Guest

    Aaron Gray wrote:
    > 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.

    --
    Steve Swift
    http://www.swiftys.org.uk/swifty.html
    http://www.ringers.org.uk
     
    Steve Swift, Jan 22, 2008
    #2
    1. Advertising

  3. Steve Swift wrote:

    > Aaron Gray wrote:
    >> 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)


    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

    --
    Bart
     
    Bart Van der Donck, Jan 22, 2008
    #3
  4. Aaron Gray

    Steve Swift Guest

    Bart Van der Donck wrote:
    > 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.

    --
    Steve Swift
    http://www.swiftys.org.uk/swifty.html
    http://www.ringers.org.uk
     
    Steve Swift, Jan 22, 2008
    #4
  5. Bart Van der Donck wrote:
    > Steve Swift wrote:
    >> 2. Add the following to give focus to your "name" field:
    >>
    >> <SCRIPT>document.myform.name.focus()</SCRIPT>


    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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, Jan 22, 2008
    #5
  6. [this supersedes my previous followup]

    Bart Van der Donck wrote:
    > Steve Swift wrote:
    >> 2. Add the following to give focus to your "name" field:
    >>
    >> <SCRIPT>document.myform.name.focus()</SCRIPT>


    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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, Jan 22, 2008
    #6
  7. Aaron Gray

    Aaron Gray Guest

    "Aaron Gray" <> wrote in message
    news:...
    >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
     
    Aaron Gray, Jan 22, 2008
    #7
  8. Randy Webb wrote:
    > Thomas 'PointedEars' Lahn said the following on 1/22/2008 7:09 AM:
    >> Bart Van der Donck wrote:
    >>> Steve Swift wrote:
    >>>> 2. Add the following to give focus to your "name" field:
    >>>>
    >>>> <SCRIPT>document.myform.name.focus()</SCRIPT>

    >> The required `type' attribute is missing.

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


    It isn't, stupid.

    > <snipped useful information>
    >
    >>>> 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.

    >> And the reference worm should be at least shortened;

    >
    > "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
     
    Thomas 'PointedEars' Lahn, Jan 23, 2008
    #8
  9. 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

    --
    laurent
     
    Laurent vilday, Jan 23, 2008
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. NotGiven
    Replies:
    3
    Views:
    356
    Michael D. Kersey
    May 13, 2004
  2. GavMc
    Replies:
    4
    Views:
    342
    Evertjan.
    Sep 22, 2005
  3. NotGiven
    Replies:
    3
    Views:
    311
    Michael D. Kersey
    May 13, 2004
  4. mitch-co2
    Replies:
    2
    Views:
    279
    mitch-co2
    Feb 22, 2005
  5. Roger
    Replies:
    3
    Views:
    336
Loading...

Share This Page