Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


How do I have the cursor placed in a text field on page load?

Dave, I have added Google to my webpage using the "Google free" code. Can you please tell me how can i by default place the cursor in google search box?


Dave's Answer:

First off, for the edification of other readers, you're refering to my previous article How can I add a Google search box to my Web site?

Now, there are two parts to having a text field (or any HTML form entity) selected when a Web page is loaded, and the key element is to have both the form and the form element named.

Let's have a look, but let's do it with a simpler HTML form for demonstration purposes:

<form method="post" name="myform">
    <input type="text" name="infield" />
</form>

Here you can see that the form is called "myform" and that the specific text field that we'd like to have auto-selected upon page load is called "infield". That's all that needs to be done within the form.

The other half of this is that there needs to be a select associated with the onLoad event, most typically dropped into the actual HTML body tag.

With the named elements shown here, the body tag would simply have added:

<body onload="document.myform.infield.focus()">

That's all there is to it. Now you just need to apply this technique to the Google search form shown in the earlier article. The only change in the form itself is that you need to give it a name:

<form method="get" action="http://www.google.com/search" name="googlesearch">

Since the text field is already called q, all we have to do is add a slight change to the body field, thusly:

<body onload="document.googlesearch.q.focus()">

That should do it!


More Useful HTML, JavaScript and Web Site Programming Articles:
✔   How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔   Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔   Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔   How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔   How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  









Reader Comments To Date: 14

MSN Grrrrrrrrrr said, on August 25, 2005 6:56 PM:

Related to your issue of placing the cursor in a text box in drafting an HTML page, my question is how do you STOP it from working. You may have noticed that the MSN start page causes the cursor to start in their search box. I am a google toolbar user and also often type my urls directly into the address bar. The MSN "cursor snag" causes me to wind up typing half my address in the address bar and the other half in the MSN search engine. I usually hit enter before I realize my cursor has been stolen and wind up getting a search result for "ustrating" leaving the "fr" in the address bar! There has got to be a way to regain control of my cursor and KEEP it where I start typing. I suspect that MSN is trying to inflate their search statistics for advertising revenue purposes however it is most certainly a nuisance. Any thoughts?

InF3rN0 said, on April 28, 2006 4:01 PM:

Hi, I just wanted to say: Thanks.

The info i found here really helped me.

tyvm and cya!

Mark said, on May 21, 2006 5:30 PM:

Hi Dave,
I found this advice very helpful, thanks.
The thing I'd like to remind other people about is this.... DON'T FORGET TO REFRESH YOUR BROWSER WHEN CHECKING TO SEE IF THE CHANGES HAVE WORKED!!!!

Suzie said, on June 30, 2006 9:52 PM:

Excellent tip and much simpler than the 'solution' here http://www.html-faq.com/htmlforms/?entryfocus

Troy said, on February 17, 2007 4:24 PM:

Dave, this site has been a lot of help -- thanks a lot.

Your instructions are pretty clear yet somehow, I just can't get the cursor to be active in the text box by default, when the page loads.

I'm pretty sure it's because I don't know where to include the onLoad instruction. Here's the code I'm working with:

SearchType your query in the box below to launch a Google search in a separate browser window.


Limit search to Stracia.com

... everything works except the cursor is an active by default. Can you help?

Also, I'd really like to have the checkbox to just search *my* site checked by default, as well. How do I do that?

Again, thanks for all your help and great site.
Troy

Paul said, on March 16, 2007 7:58 AM:

I'm glad this page came up first when I searched in Google because that was very, very easy!

Gil said, on May 23, 2008 8:18 PM:

For a long time now I have wanted to make this simple change to my Google search box on my personal website. This was a huge help and only took about one minute to do. Thanks Dave!

Johann said, on June 28, 2009 7:28 AM:

Thank You. The cursor is in the Google search box when I open my site.

sathik said, on October 15, 2009 7:14 PM:

Good one...

MSN cursor stealers said, on February 9, 2010 10:32 AM:

Please don't change the cursor focus, I hate this, I am changing my homepage from MSN because of this, I always start to type in the url and before I know it half of the url is in the bing search box, it drives me crazy.

vincent said, on June 2, 2010 12:14 AM:

a little search and i found this site has been a lot of help, thanks for sharing this knowledge.

noxi said, on December 4, 2010 9:28 PM:

Great Thank You :D

Now i have my Personal Startsite with google search!

pk said, on December 26, 2010 11:01 AM:

was very helpful dave
thanks

nick c said, on April 1, 2011 9:28 PM:

first google result for my search and answered my question immediately. your simplified demo made my implementation a breeze. thanks!

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.