How can I clear the input text after clicking

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 TEXT. When I perform a click, I want the input field to become empty.

Solution 1:

To remove the default text, on clicking the element:

$('input:text').click(
    function(){
        $(this).val('');
    });

I would, though, suggest using focus() instead:

$('input:text').focus(
    function(){
        $(this).val('');
    });

Which responds to keyboard events too (the tab key, for example). Also, you could use the placeholder attribute in the element:

<input type="text" placeholder="default text" />

Which will clear on focus of the element, and reappear if the element remains empty/user doesn't input anything.

Solution 2:

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:

<form id='theForm'>
  <label>Field 1:
    <input type='text' value='provide a value for field 1'>
  </label>
  <br><label>Field 2:
    <input type='text' value='provide a value for field 2'>
  </label>
  <br><label>Field 3:
    <input type='text' value='provide a value for field 3'>
  </label>
</form>

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:

<form id='theForm'>
  <label>Field 1:
    <input type='text' placeholder='provide a value for field 1'>
  </label>
  <br><label>Field 2:
    <input type='text' placeholder='provide a value for field 2'>
  </label>
  <br><label>Field 3:
    <input type='text' placeholder='provide a value for field 3'>
  </label>
</form>

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) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

Live copy

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

Solution 3:

You could try this

$('#myFieldID').focus(function(){
  $(this).val('');
});

Solution 4:

$("input:text").focus(function(){$(this).val("")});