How can I clear the input text after clicking

Question

Using jQuery, how can I clear the input text after I made a click? By default, the value remains in the input field.

For example, I have an input text and the value is <

Answer 1

Update: I took your saying "click" literally, which was a bit dumb of me. You can substitute focus for click in all of the below if you also want the action to happen when the user tabs to the input, which seems likely.

Update 2: My guess is that you're looking to do placeholders; see note and example at the end.

---

Original answer:

You can do this:

$("selector_for_the_input").click(function() {
    this.value = '';
});

...but that will clear the text regardless of what it is. If you only want to clear it if it's a specific value:

$("selector_for_the_input").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

So for example, if the input has an id, you could do:

$("#theId").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

Or if it's in a form with an id (say, "myForm") and you want to do this for every form field:

$("#myForm input").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

You may also be able to do it with delegation:

$("#myForm").delegate("input", "click", function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

That uses delegate to hook up a handler on the form but apply it to the inputs on the form, rather than hooking up a handler to each individual input.

---

If you're trying to do placeholders, there's more to it than that and you may want to find a good plug-in to do it. But here's the basics:

HTML:

  Field 1:
    
  
  
Field 2:
    
  
  
Field 3:
    
  

JavaScript using jQuery:

jQuery(function($) {

  // Save the initial values of the inputs as placeholder text
  $('#theForm input').attr("data-placeholdertext", function() {
    return this.value;
  });

  // Hook up a handler to delete the placeholder text on focus,
  // and put it back on blur
  $('#theForm')
    .delegate('input', 'focus', function() {
      if (this.value === $(this).attr("data-placeholdertext")) {
        this.value = '';
      }
    })
    .delegate('input', 'blur', function() {
      if (this.value.length == 0) {
        this.value = $(this).attr("data-placeholdertext");
      }
    });

});

Live copy

Of course, you can also use the new placeholder attribute from HTML5 and only do the above if your code is running on a browser that doesn't support it, in which case you want to invert the logic I used above:

HTML:

  Field 1:
    
  
  
Field 2:
    
  
  
Field 3:
    
  

JavaScript with jQuery:

jQuery(function($) {

  // Is placeholder supported?
  if ('placeholder' in document.createElement('input')) {
    // Yes, no need for us to do it
    display("This browser supports automatic placeholders");
  }
  else {
    // No, do it manually
    display("Manual placeholders");

    // Set the initial values of the inputs as placeholder text
    $('#theForm input').val(function() {
      if (this.value.length == 0) {
        return $(this).attr('placeholder');
      }
    });

    // Hook up a handler to delete the placeholder text on focus,
    // and put it back on blur
    $('#theForm')
      .delegate('input', 'focus', function() {
        if (this.value === $(this).attr("placeholder")) {
          this.value = '';
        }
      })
      .delegate('input', 'blur', function() {
        if (this.value.length == 0) {
          this.value = $(this).attr("placeholder");
        }
      });
  }

  function display(msg) {
    $("
").html(msg).appendTo(document.body);
  }

});

Live copy

(Kudos to diveintohtml5.ep.io for the placholder feature-detection code.)