How do I have the cursor focus to a text field on page load?

Search

Photo Gallery

Google Translator

Community News

10 Amazing Avatar movie Photoshop Tutorials

Here is a compilation of some great Photoshop tutorials which will help you to create your own Na’vi Avatar from a picture of yourself.
Insert Google Analytics without editing your theme

I like to use Google Analytics, but the boring stuff is that when you switch themes, you’ll have to re-insert the code in the new theme. To avoid it, let’s use the power of WordPress hook to in…
10 Ways to Use .htaccess to Speed Up WordPress

Recently I’ve become more and more interested in the .htaccess file as a way to speed up and protect your site. Previously here on WPShout I’ve written an “A to Z of WordPress .htaccess Hacks…
How to Display Twitter Count in Plain Text

If you don’t like the Twitter Counter Badge provided by TwitterCounter and you want to display your Twitter counter in plain text, actually it is easy. You can just follow the below simple step t…
27 Bold and Beautiful Brochure Designs

Your marketing brochure is the next best thing to your business card. But, it doesn’t have to be plain and boring to look professional. Add a splash of color, play with different kinds of type an…
5 Secrets of the Photoshop Crop Tool

If you’re used to clicking the crop tool dragging the tool over your image and pressing Enter, it may surprise you to know that there are other options that you can use when cropping in Photoshop…
jQuery for Absolute Beginners: The Complete Series…

Hi everyone! Today, I posted the final screencast in my ”jQuery for Absolute Beginners” series on the ThemeForest Blog. If you’re unfamiliar – over the course of about a mon…
How to install wordpress on windows server / IIS6 …

An easy solution for wordpress installation problem on host behind Windows Server and IIS 6.0, plus hosting provider does not allow mod_rewite patch. After following this guide, you get SEO friendl…
How To Use Icons To Support Content In Web Design

Why use icons? Design is all about communication: it doesn’t matter how important or exciting the information that you’re sharing is if you fail to hook your visitors. When initially viewing a …
6 Amazing CSS Grid Layout Generator For Web Design…

online generators have been a lot of help with the work of the designers. As a favicon generator, background generator, button generators and other . In this article I will share information about …

Add News

How do I have the cursor focus to a text field on page load?

January 29th, 2009Read 8541 times

Here I’m explaining how to focus cursor to a text field on page load. You can do this with several methods with a simple javascript code. For this, you have to put a name for your form and your text filed. See the sample form below.

<form name="myForm" method="post" action=""> <label> <input type="text" name="username" /> </label> <label> <input type="submit" name="Submit" value="Submit" /> </label> </form>

Now just look on the code. You can do this with a single line code within body onLoad.
<body onLoad="document.myForm.username.focus();">
You can call this code with a function like this:
<script> function curFocus(){ document.myForm.username.focus(); } </script> <body onLoad="curFocus();">

Another method is put the code inside the page after the form. See how is it.
<script type="text/javascript" language="JavaScript"> var focusCtrl = document.forms["myForm"].elements["username"]; if(focusCtrl) { focusCtrl.focus(); } </script>

Tags: cursor, focus, Javascript, Javascript tutorial, page load
Posted in Javascript, Tutorial |

8 Comments

Add Yours

How do I have the cursor focus to a text field on page load?…

explaining how to focus cursor to a text field on page load. You can do this with several methods with a simple javascript code…

Trackback by blogbookmark.com — January 29, 2009 @ 12:07 pm
How do I have the cursor focus to a text field on page load?…

Explaining how to focus cursor to a text field on page load. You can do this with several methods with a simple javascript code…

Trackback by Blogsvine — January 29, 2009 @ 12:11 pm
bijusubhash.com » Blog Archive » How do I have the cursor focus to a text field on page load?…

Explaining how to focus cursor to a text field on page load. You can do this with several methods with a simple javascript code…

Trackback by linksmarker.com — January 29, 2009 @ 1:02 pm
How do I have the cursor focus to a text field on page load?…

Explaining how to focus cursor to a text field on page load. You can do this with several methods with a simple javascript code…

Trackback by PlugIM.com — January 29, 2009 @ 1:08 pm
1. Assigning to document.unload is poor citizenship. If anything else on your page requires similar handling, you will have to have your onload method do more than set the focus, and a lazy programmer might not even change its name from ‘curFocus’. Instead, use addEvent (IE) or addEventListener (Firefox, etc.)

1.1. Instead of using conditional code to choose between addEvent and addEventListener, after you’ve learned to do that, consider using a JavaScript library such as Prototype or jQuery.

2. Adding raw Javascript to your page is messy. Place it in a separate file, and invoke it with a script src=”…” element.

Comment by Eric Jablow — January 29, 2009 @ 4:22 pm
I read your posts for a long time and must tell that your articles are always valuable to readers.

Comment by Ex Back — April 9, 2009 @ 6:16 pm
Metallica-Cursors-Download
Metal Cursor Archives
Cursors Download

http://metallicafanatic.blogcu.com/metallica-cursor-download-cursores_4440105.html

Comment by Cursor — June 12, 2009 @ 5:53 pm
Increddible useful info. I will be back to read other posts also.

Comment by Carroll B. Merriman — February 12, 2010 @ 10:59 pm