in

Telligenti

Serving up fresh ideas every day, Telligent style

Adonis Bitar

Give Login Focus

I greatly expanded my knowledge of Community Server and especially CSS by trying my hand at building a custom theme for the Community Server extravaganza last week.  While working on my entry [VoteForMeNow! :) Look for OOTO2K7], I found a number of things I wanted to do.  One of them was to put the window focus on the username field when you hit the login.aspx page.

In your typical ASP.Net site, you can drop a Page.Form.DefaultFocus = txtUsername.ClientID; in your page_load and that would give focus where you want.  The problem with login.aspx is that the login form is a templated control and you don't have access to "username".

This was a little trickier than I expected and I'm fairly certain I haven't done it the best way but here's a way that works.  Why don't you fix it and leave me some feedback :).

The login form for CS in the common dir of your theme so for most of you it's probably something like /themes/default/common/login.aspx.

Add this block to the top of your page above the <asp:Content ContentPlaceHolderID="bodyContent" runat="server"> and when your page renders, a focus script will be added to put your user's cursor there in the username field where they can type+tab+type+enter and they're signed in.

<script language="C#" runat="server">
protected override void OnPreRender(EventArgs e)
{
    UsernameSeekAndFocus(Page.Form);

    base.OnPreRender(e);
}

private void UsernameSeekAndFocus(Control parent)
{
    foreach (Control child in parent.Controls)
    {
        if (child.ID == "username")
        {
            Page.Form.DefaultFocus = child.ClientID;
            return;
        }

        if (child.HasControls())
            UsernameSeekAndFocus(child);
    }
}
</script>

Read the complete post at http://ooto.info/archive/2007/08/07/Give-Login-Focus.aspx

Powered by Community Server (Commercial Edition), by Telligent Systems