how to clear textbox when it first comes into focus?

Question

I'm trying to clear a textbox when it first comes into focus and that's all. I can clear the textbox whenever it comes into focus but this is turning into a problem. I just want it to clear when it first comes into focus.

So when the page loads, the textbox says "search here" -- once the user clicks inside, "search here" disappears and the textbox goes blank. The user can keep typing their search query.

But my code, as seen below, just keeps clearing the textbox. Any ideas?

    $('input[type=text]').focus(function() {
      $(this).val('')
});

Answer 1

This clears the default text on focus and puts it back in on blur. If a new text is typed in different then default value, it no longer clears the input. Test it out by clicking outside and input few times. Then type in new text and do the same.

$('.text').focus(function() {
    if (this.value == this.title) {
        $(this).val("");
    }
}).blur(function() {
    if (this.value == "") {
        $(this).val(this.title);
    }
});

Check working example at http://jsfiddle.net/32Tns/4/

Answer 2

Most of the answers that have been published solve the problem. Now I'm posting another one that make use of the useful jQuery function "one".

Jquery.one()

Description: Attach a handler to an event for the elements. The handler is executed at most once per element.

//Limpiar campos input la primera vez que se entre
//Cleaning input fields first time they get focus
$('input[type=text]').one("focus", function() {    
        $(this).val("");
});

Answer 3

var isFirst = true;
 $('input[type=text]').focus(function() {
      if(isFirst){
        $(this).val('');
        isFirst = false;
       }
});

Try this. The code only delete only the first occurrence of focus.

Answer 4

If you only want to do this once, then you won't need the event handler anymore after executation. So removing the event handler would be the best practice and perfomant way.

$("input[type=text]").focus(function(event) {
    $(this).val("").unbind(event);
});

This is better, because you won't create an overhead by defining additional variables or DOMNodes and the event is deleted as you won't use it anymore.

Aside from that we suggest you using a different selector, because you will apply this event for evey textinput on your site. And it's very likely, that you don't want this. I recommend you using an id selector ( input#id ) or class selector ( input.class ) to clearly identify this special textinput. So you'll endup with:

$("input.clearOnFocus").focus(function(event) {
    $(this).val("").unbind(event);
});

---

I suppose, that you want to do something similar to the search bar on the top of this page. What you're doing is semantically not correct. Look at this for real inlined labels .