Welcome to WebmasterWorld Guest from 54.224.160.42

Forum Moderators: open

Message Too Old, No Replies

Make the words inside a form's text input field disappear upon click

HTML Hard coder, but Javascript newbie tries her hand

     
5:21 pm on Apr 15, 2004 (gmt 0)

New User

10+ Year Member

joined:Mar 31, 2004
posts:16
votes: 0


Hey everyone,

So here's what I have on my page: a search field that's not entirely obviously a search field except that it has a "go" button next to it. To make it easier on the user in identifying its purpose, I've added the text "search our site" inside the field as a "value" for the input tag.

However, when a user clicks into that field, before they can type their query, they have to highlight and delete the "search our site" text.

I feel like I've seen ways around this, so that once you click in, the text that was in the field goes away, but can't seem to find *anything* online.

Are my Google skills failing me?
Or does this capability not exist?
Or does it exist, but nobody's asked about it before?

<sigh>

Thanks in advance for any help,
Melissa

6:12 pm on Apr 15, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


Here are two options:

<input onfocus="this.value=''" type="text" value="some text" />

<input onfocus="this.select()" type="text" value="some text" />

I favour the second one, as it behaves a little ,more like textboxes in applications generally do. This gives the user to amend text that they have put in, without having to rewrite it completely if they go back to the box.

6:25 pm on Apr 15, 2004 (gmt 0)

New User

10+ Year Member

joined:Mar 31, 2004
posts:16
votes: 0


Dear Bernard,

Go newbies! This is an absolutely perfect solution, and exactly what I needed. Thank you so much for your help.

~ Melissa ~