CODEWITHSUNDEEP
javascripthtml
tony noriega
tony noriega

Reputation: 7673

clear text onclick - textfield

What is the best method to clear text in a text field, when the user clicks on it?

I.e., if the text search field says "search" and when they click it, it clears the value.

Upvotes: 9

Views: 67846

Answers (5)

Damon Pace
Damon Pace

Reputation: 168

<input name="foo" placeholder="Search" /> The placeholder tag is a new HTML5 tag that does exactly what you want to do here.

Upvotes: 17

AlexCuse
AlexCuse

Reputation: 18316

If jquery's an option, I'd consider the watermark plugin

It achieves what you're after, but with a bit more style

Upvotes: 0

Jason
Jason

Reputation: 813

Normal HTML:

 <script type="text/javascript">
    function clearThis(target){
        target.value= "";
    }
    </script>
    <input type="text" value="Search" onfocus="clearThis(this)" />

jQuery:

<script type="text/javascript">
    function clearThis(target){
        $(target).val = "";
    }
</script>
<input type="text" value="Search" onfocus="clearThis(this)" />

Upvotes: 6

Oded
Oded

Reputation: 499352

In JavaScript you can simple set the value of the contorol to an empty string in the OnFocus event handler.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382881

You could do like:

<input type="text" onfocus="if(this.value == 'search') {this.value=''}" onblur="if(this.value == ''){this.value ='search'}">

Upvotes: 25

Related Questions