General Question

makemo's avatar

JavaScript: How to target & set focus on a text input field?

Asked by makemo (531points) April 25th, 2008

I recently registered an new domain and with it, I got this Google Apps startpage for my domain.

Probllem is, that when I open a new Google search start page, the text input field never gets focused, as it did when I was using the generic Google seach page (iGoogle).

So I’m trying to figure out a JavaScript to locate the specific target element for that text (search) field and add it in the start page URL, so that I can just type away without having to actually click in the text input field, each time I open a new start page.

I’m highly new to JavaScript, so any help would be much appreciated. FWIW my startpage is http://start.henrikcederblad.com/ (I don’t know if its viewable by the public, but I think it is, yes?).

Observing members: 0 Composing members: 0

6 Answers

jrpowell's avatar

If the form looks something like this:

<form name=“form”>
<input type=“text” name=“textfield”>
</form>

Add this to your body tag.

<body OnLoad=“document.form.textfield.focus();”>

edit :: when viewing your page source I wasn’t getting any line breaks. I didn’t want to dig thought that to find exactly what you should add.

jrpowell (40562points)“Great Answer” (0points) Flag as…
Breefield's avatar

Give the input box an id like “startbox”
Then on the body tag add the attribute.

onLoad=“document.getElementById(‘startbox’).focus();”

Breefield (2733points)“Great Answer” (2points) Flag as…
jrpowell's avatar

Use what Bree said. That is a better solution.

jrpowell (40562points)“Great Answer” (0points) Flag as…
makemo's avatar

Thanks, but I’m looking for a “bookmarklet hack”, so to speak.

My main objective is to automatically bring text input focus on the search field, in my new custom branded Google search page courtesy of Google Apps. I was very frustrated when I found out that this particular search page, for some weird reason, doesn’t bring the focus on the search field once you open the page. But rather, I now have to click on it with the mouse and then I can type my search in…

I’m looking for a bookmark that resembles something like this:

http:// [start page url] + [added javascript for directly focusing on the search field]

I suck at JavaScript, so this is just a (very lousy) example:

http://start.henrikcederblad.com/javascript:document.body.doc3.nhdrwrap.nhdrwrapinner.nhdrwrapsizer.table.tbody.tr.td.div.center.gsea.form.table.tbody.tr.td.input.focus();

^ I know, this is totally not working… Here’s a screenshot from CSS Edit on that page, what I believe resembles the correct DOM path: http://img170.imageshack.us/img170/2559/googlestartpagedompathwa5.png (look in the upper hand part of the picture).

makemo (531points)“Great Answer” (0points) Flag as…
makemo's avatar

FWIW, here is the actual HTML structure for the DIV containing the search field:

<div id=“gsea”>
<form method=“get” action=“http://www.google.com/custom”>
<table>
<tbody>
<tr>
<td valign=“top” height=“32” nowrap=“nowrap” align=“left”><input name=“q” size=“35” maxlength=“255” type=“text” /> <input name=“sa” value=“Google Sök” type=“submit” /><input type=“hidden” name=“client” value=“ca-ref-pub-9868490492756260” /><input type=“hidden” name=“cof” value=“FORID:1” /><input type=“hidden” name=“hl” value=“sv” /><input type=“hidden” name=“ie” value=“UTF-8” /><input type=“hidden” name=“oe” value=“UTF-8” /></td>
</tr>
</tbody>
</table>
</form>
</div>

makemo (531points)“Great Answer” (0points) Flag as…
andrew's avatar

Look through the Fluther Javascript. We do this when you click the login/join links.

andrew (16543points)“Great Answer” (0points) Flag as…

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther