Snippets

Home / Snippets / Correct Login Form AutoFocus

Correct Login Form AutoFocus

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Mon. May. 1st, 2006 8:26 AM

1 of 1

mattrmiller

Focus | Form | JavaScript | Password | Username

0 comments

This is a correct way to do login form auto-focus, checking to see if either username or password have focus already. This prevents someone from typing a username hitting TAB, then having JavaScript chime in, resetting focus to Username while user is typing in their password. In this case, the password is appended to the username which is in plaintext.

<html>

        <body onload="setFocus();">

                <script>

                        var bUsernameHasFocus = false;

                        var bPasswordHasFocus = false;

                        function setFocus()

                        {

                                // Set focus to username

                                if (bUsernameHasFocus == false && bPasswordHasFocus == false)

                                {

                                        document.getElementById("username").focus();

                                }

                        }

                </script>

                <form action="#" method="post" name="loginForm" id="loginForm">

                        <input name="username" onfocus="bUsernameHasFocus = true;" onblur="bUsernameHasFocus = false;" type="text" id="username" value=""> 

                        <input name="password" onfocus="bPasswordHasFocus = true;" onblur="bPasswordHasFocus = false;" type="password" id="password" value=""> 

                </form>

        </body>

</html>