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.
autofocusattribute 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
autofocusattribute, which is a Boolean. This attribute can be applied to the
elements. The exception is that
autofocuscannot be applied to an
autofocuselement if the
typeattribute 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:
[[% Start edit #1 by Jonathan Hult on 06/12/2013 to add autofocus attribute %]]
<div class="idcLargeFormField"><input id="j_username" maxlength="200" name="<$userNameField$>" <$autoCompleteAttribute$> size="20" type="text" value="" autofocus /></div>
[[% End edit #1 by Jonathan Hult on 06/12/2013 to add autofocus attribute %]]
[[% Start edit #2 by Jonathan Hult on 06/12/2013 to set focus for IE since IE 9 and lower does not support the autofocus attribute %]]
[[% End edit #2 by Jonathan Hult on 06/12/2013 to set focus for IE since IE 9 and lower does not support the autofocus attribute %]]
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