Displaying set value in text box

Question

So I've got a problem. I've created a text box like that:

 <input type="text" id="search" name="search" class="myText" value="Search for a keyword" onclick="value=''"/>

My problem basically is that after I press the text box to write a text of my own, and then press some other place on the screen, the value I set at start (Search for a keyword) will not be displayed once again. I've tried everything. How do I make it display again once I've pressed some other place on the screen?

I think you need to make your question clearer. So when you enter a value in this text box, and then click on another form element, the value you've entered disappears and is replaced with 'Search for a keyword', is that correct? — Lee, Sep 01 '14 at 14:13
You didn't get me right, my bad. I would like to do just what you described. As you said, I would like the value I entered to disapper and be replaced with 'Search for a keyword' once I press some other place on the screen. — Dan Brooks, Sep 01 '14 at 14:15

score 1 · Answer 1 · answered Sep 01 '14 at 14:14

1

You should use the placeholder attribute :

Example :

<input name="Email" type="text" id="Email" value="email@abc.com" placeholder="Enter your mail" />

answered Sep 01 '14 at 14:14

Rémi P

421
5
11

THank you very much, it works. bY the way, is there any way to change the color of the text in the placeholder? it's grey and ugly :p – Dan Brooks Sep 01 '14 at 14:18
Yes you can using Css : you can find examples there : http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – Rémi P Sep 01 '14 at 14:21
Remi - I gave you an upvote, you were a tad faster than I was. – Kai Mattern Sep 01 '14 at 14:29

Kai Mattern · Accepted Answer · 2014-09-01T14:28:06.790

Get rid of the onclick="value=''

You are basically saying, empty the box whenever I click on it.

If you can use html5, you can use:

<input type="text" id="search" name="search" class="myText" placeholder="Search for a keyword" />

And you can style it as well:

<style type="text/css">
    ::-moz-placeholder {color:#ddd;}
    ::-webkit-input-placeholder {color:#ddd;}
    :-ms-input-placeholder {color:#ddd;}
</style>

Displaying set value in text box

2 Answers2