Login form autofocus – WebCenter Content 11g

In WebCenter Content 11g, form (cookie) based authentication is used in place of the basic authentication standard in version prior to 11g.

Before 11g
login_basic

11g
login_form

Overall, this was a good move as it allows for users to logout (without closing their browser). However, one thing that has always bothered me about the new form based authentication is that the User Name field was not autofocused. This means to login, I need to either click Tab a bunch of times or use my mouse to click into the User Name field.  I finally became tired of doing this, so I wrote a custom component, LoginFormAutofocus, which autofocuses the User Name field.

Autofocus is a new attribute in HTML 5.

The autofocus attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form item in a document can have the autofocus attribute, which is a Boolean. This attribute can be applied to the <input>, <button>,<select>, and <textarea> elements. The exception is that autofocus cannot be applied to an autofocus element if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).

More information on the autofocus attribute can be found at Dive Into HTML5. Unfortunately, Internet Explorer still has issues with HTML 5 (although IE 10 is getting better). Thus, a slightly different method is used for IE.

The code is as follows:

You will notice the conditional comment used to detect Internet Explorer. Conditional comments are gone in IE 10. More information on this can be found on the following CSS Tricks article: IE 10 Specific Styles.

The full source code for this component can be found here: https://bitbucket.org/jhult/loginformautofocus

Leave a Reply

1 Comment on "Login form autofocus – WebCenter Content 11g"

Notify of
avatar
Sort by:   newest | oldest | most voted
wpDiscuz