Make text inside a textfield display when the page loads and disapear when clicked

0

By roryt on Dec 31st, 2006 9:51 pm

Use

This script can be used to mimize space of a textfield by putting the title of the field inside the text field itself when the page loads. This title will then disapear when it is clicked.

How To Use

Use the following code as your textfield and fill in the "value" property with the text that you want appear inside the field.

I hope you can use this handy code somewhere

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

5 Years Ago

0

But this code won't work if the text field loses focus and then gains it again and for a variety of other conditions. With a bit of tweaking you guys should get the desired result. Here is my stab at it...:

<html>
<head>
    <title>Cool Text Effect</title>
</head>
<body>
    <label>Click on this text box </label>
    <input type="text" name="txt" value="Search" 
        onfocus="if(this.value == 'Search') { this.value = ''} " 
            onblur="if(this.value == '') { this.value='Search'; }" />
</body>
</html>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

5 Years Ago

0

ah... but what if nothing and Search are valid values? ;)

[html]

[/html]

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

Nice job, the original code i already know but the comments posted are very helpful.

tavox

Newbie Poster

7 posts since Mar 2007

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

<html>
<head>
<title>Text Effect</title>
</head>
<body>
<input style='background:url("search.jpg")' type="text" name="txt" value="" 
  onfocus='this.style.background="none";' 
  onblur="if(this.value == '') { this.style.background="url('search.jpg')"; }" />
</body>
</html>

where search.jpg is an image of the word 'Search'

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

2 Years Ago

0

this was really helpful, thanks

ServletEst

Newbie Poster

1 post since Aug 2009

Reputation Points: 10

Solved Threads: 0

Make text inside a textfield display when the page loads and disapear when clicked

This article has been dead for over three months