I have a textfield () in my homepage for a searchstring. Normaly I have a text like "enter here to searach..." in it.

Now I will clear the box from the text when a user click into it.

How to solve? JavaScript?

I have a textfield () in my homepage for a searchstring. Normaly I have a text like "enter here to searach..." in it.

Now I will clear the box from the text when a user click into it.

How to solve? JavaScript?

• javascript
• asp
• html
• textbox

5 Answers 5

This can be done by using the placeholder attribute in HTML. Example:

<input type="text" placeholder="e.g. John Doe">

For browsers who don’t support this attribute natively, you could use JavaScript.

If you’re using jQuery, you could consider using my placeholder plugin for jQuery, which is the most robust solution I’ve seen. Here’s a demo page: http://mathiasbynens.be/demo/placeholder

create a JavaScript file or use a current one then write in it:

Function function_name()
{

    document.getEelementByName("Control_Name").setAttribute("Value", '');
}

then in the page head:

<script id="js1" type="text/javascript" src="dir/file_name.js"></script>

The Control Tag bee:

<input type="text" name="Control_Name" onClick="return js1/function_name();" />

Yes you need javascript to achieve this. You could subscribe for the onclick event and when this event is triggered set the text to empty and then unsubscribe from the onclick event to avoid clearing the text every time a user clicks:

var foo = document.getElementById('foo');
foo.onfocus = function() {
    foo.value = '';
    foo.onfocus = null;
};

Live demo.

And if you are using jquery there is a really nice watermark plugin which allows you to do this.

I would suggest writing an onfocus Javascript handler; that will be triggered whether you’ve clicked it or tabbed into it.

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

You can use onfocus and onblur javascript methods

<input type="text" name="searchinput" onblur="this.value='enter here to search...';" onfocus="this.value = '';" />