How can I clear the input text after clicking

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.

Answer by T.J. Crowder for How can I clear the input text after clicking

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.)

Answer by Ryan for How can I clear the input text after clicking

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

Answer by David Thomas for How can I clear the input text after clicking

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:

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

Answer by scunliffe for How can I clear the input text after clicking

You could try this

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

Answer by Bharath for How can I clear the input text after clicking

If you need placeholder like behavior. you can use this.

$("selector").data("DefaultText", SetYourDefaultTextHere);  // You can also define the DefaultText as attribute and access that using attr() function    $("selector").focus(function(){  if($(this).val() == $(this).data("DefaultText"))     $(this).val('');  });  

Answer by Starx for How can I clear the input text after clicking

I am supposing you are trying to create a effect, where the textbox contains a label. And when the user click in the textbox, it disappears and lets the user input the text. You do not require Jquery for this.

Demo

Answer by Pedro Oliveira for How can I clear the input text after clicking

There is an elegante way to do this:

This way, if you type anything inside the search box, it wont be deleted when click inside the box again.

Answer by rami for How can I clear the input text after clicking

    enter code here
        
  
        
    

Answer by Don Zanurano for How can I clear the input text after clicking

try this

$("input[name=search-mini]").on("search", function() {   //do something for search  });  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72