SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict chartahir's Avatar
    Join Date
    Oct 2006
    Location
    Karachi, Pakistan
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    focus field on page load

    I want to focus the field on page load ,its the login page and i want to focus the UserID field.

    How i can i do that ?
    chartahir

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By using the fields focus method. Do this once in the window.onload

  3. #3
    SitePoint Zealot logitron's Avatar
    Join Date
    Feb 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a small example of what, I think, you are looking for:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    		<title>Test Page</title>
    		
    	</head>
    	
    	<body onLoad="document.frm.username.focus()">
    		
    		<form id="frm" name="frm" action="#" method="POST">
    			<p>
    				<label for="username">Username:</label>
    				<input type="text" id="username" name="username" size="16" maxlength="16" />
    			</p>
    			
    			<p>
    				<label for="password">Password:</label>
    				<input type="text" id="password" name="password" size="16" maxlength="16" />
    			</p>
    			
    			<p>
    				<input type="submit" id="submit" name="submit" value="Login" />
    			</p>
    		</form>
    		
    	</body>
    </html>
    The most important part of this code is the 'onLoad' attribute in the 'body' tag. Hope this helps...
    Patrick Smith
    PHP Programmer

  4. #4
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and you can also define the onload event explicitly like ...

    Code:
    <script language="javascript">
        onload = function() {
            document.frm.username.focus();
        }
    </script>

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use window.onload instead of just onload. Its faster.

  6. #6
    SitePoint Addict chartahir's Avatar
    Join Date
    Oct 2006
    Location
    Karachi, Pakistan
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks for the help, the probelm is solved now.
    chartahir

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Better yet use:

    window.onload=function() {
    x = document.getElementsByTagName('input')[0];
    if (x.value == '') x.focus();
    }

    That way it wont move the focus back to the field if your visitor has already started filling out the fom before the page finishes loading.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question focus form fields by enter

    hi
    i want to focus my form fields by enter key not by using tabindex.
    it means that when user fill a field and want to go to next field in the form he/she can enter(enter key from keyboard) and then the next field focus. how can i do this? please help me quickly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •