Skip to main content
J
jedale
Inspiring
February 7, 2007
Question

Onload and Tabbing focus problem

  • February 7, 2007
  • 2 replies
  • 467 views
I was asked by some of my users to set focus to the username field on the login page when it loads. I began by adding to the body tag and cfform tags OnLoad function. This allowed the page to load and set up the user to just start typing without clicking in the field. The problem is with trying to tab to the next field. The only way I can even start tabbing to other fields is to click in one and then depress the tab key. However, this only tabs over to the other two fields while leaving out one of the fields.

I would like the page to load so that the user can start typing and then by pressing tab he can move on to the next field. I don't know why this code doesn't work. It is kind of frustrating. Does anybody know of a fix to this problem?

Thank you for your time!

    This topic has been closed for replies.

    2 replies

    J
    jedaleAuthor
    Inspiring
    February 9, 2007
    Well it worked. I wonder why wmode would disrupt the forms tabbing?

    Thank you for much your much needed help. I would have never thought about removing wmode.
    N
    Newsgroup_User
    Inspiring
    February 7, 2007
    Use a tabindex attribute in your form fields:
    http://www.htmlgoodies.com/tutorials/forms/article.php/3479201


    --
    --
    Tom Muck
    co-author Dreamweaver MX 2004: The Complete Reference
    http://www.tom-muck.com/

    Cartweaver Development Team
    http://www.cartweaver.com

    Extending Knowledge Daily
    http://www.communitymx.com/


    "jedale" <webforumsuser@macromedia.com> wrote in message
    news:eqc1mn$6jl$1@forums.macromedia.com...
    I was asked by some of my users to set focus to the username field on the
    login
    page when it loads. I began by adding to the body tag and cfform tags
    OnLoad
    function. This allowed the page to load and set up the user to just start
    typing without clicking in the field. The problem is with trying to tab to
    the
    next field. The only way I can even start tabbing to other fields is to
    click
    in one and then depress the tab key. However, this only tabs over to the
    other
    two fields while leaving out one of the fields.

    I would like the page to load so that the user can start typing and then by
    pressing tab he can move on to the next field. I don't know why this code
    doesn't work. It is kind of frustrating. Does anybody know of a fix to this
    problem?

    Thank you for your time!



    <body onLoad="self.focus();document.login.focus()" bgcolor="#F2F9FF">
    <center>

    <cfform format="flash" name="login" action="login.cfm" method="post"
    width="100%" height="100%" preservedata="true" preloader="yes"
    timeout="3600"
    wmode="transparent" style="font-size:12px; font-weight:bold;
    background-color:##F2F9FF; themeColor:##003366" onload="name.setFocus();">

    <cfformitem type="script">
    function Tabit(){
    if(Key.getCode() == Key.TAB){
    password.setFocus()
    }
    }
    </cfformitem>

    <cfformgroup type="vbox" style="horizontalAlign:'center';" id="mainbox">
    <cfformgroup type="panel" id="loginPanel"
    style="headerHeight:0;panelBorderStyle:'roundCorners'; shadowDistance:1;
    background-color:##80A8D5; marginTop:0;" width="320" height="80">
    <cfformitem type="spacer" height="2" />
    <cfinput width="200" maxlength="30" type="text" name="name" label="Name"
    style="font:Arial, Helvetica, sans-serif; font-size:12px;
    font-weight:normal"
    onKeyDown="Tabit();">
    <cfinput width="200" maxlength="30" type="password" name="password"
    label="Password" style="font:Arial, Helvetica, sans-serif;
    font-size:12px;font-weight:normal" >
    </cfformgroup>

    <cfformgroup type="vbox">
    <cfformgroup type="horizontal" style="horizontalAlign:'center';">
    <cfinput type="button" name="logInButton" value="Log In"
    onClick="alert('Submitted form');">
    </cfformgroup>
    </cfformgroup>
    </cfformgroup>
    </cfform>

    </center>
    </body>


    J
    jedaleAuthor
    Inspiring
    February 8, 2007
    Thanks for your response. I tried to add the necessary items to the tags, but it has no effect. I believe it is because my form is a rich flash form. Do you know what would work for my form?

    Thanks in advance.
    N
    Nick_Watson1
    Participating Frequently
    February 8, 2007
    Either remove wmode or set wmode="window"

    Then it works for me

    <body onLoad="self.focus();document.login.focus()" bgcolor="#F2F9FF">
    <center>

    <cfform format="flash" name="login" action="login.cfm" method="post" width="100%" height="100%" preservedata="true" preloader="yes" timeout="3600" wmode="window" style="font-size:12px; font-weight:bold; background-color:##F2F9FF; themeColor:##003366" onload="name.setFocus();">


    <cfformgroup type="vbox" style="horizontalAlign:'center';" id="mainbox">
    <cfformgroup type="panel" id="loginPanel" style="headerHeight:0;panelBorderStyle:'roundCorners'; shadowDistance:1; background-color:##80A8D5; marginTop:0;" width="320" height="80">
    <cfformitem type="spacer" height="2" />
    <cfinput width="200" maxlength="30" type="text" name="name" label="Name" style="font:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal">
    <cfinput width="200" maxlength="30" type="password" name="password" label="Password" style="font:Arial, Helvetica, sans-serif; font-size:12px;font-weight:normal" >
    </cfformgroup>

    <cfformgroup type="vbox">
    <cfformgroup type="horizontal" style="horizontalAlign:'center';">
    <cfinput type="button" name="logInButton" value="Log In" onClick="alert('Submitted form');">
    </cfformgroup>
    </cfformgroup>
    </cfformgroup>
    </cfform>

    </center>
    </body>
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices