How to clear input text after clicking

Question

Using jQuery, how can I clear the input after I clicked? By default, the value remains in the input field.

For example, I have input text, and the value is TEXT . When I click, I want the input field to become empty.

Answer 1

To remove the default text by clicking an item:

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

I would suggest using focus() instead of focus() :

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

which also responds to keyboard events (e.g., tab key). Alternatively, you can use the placeholder attribute on an element:

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

Which clears the focus of the element and appears again if the element remains empty / the user does not enter anything.

Answer 2

Update: I spoke your word “click” literally, which was a little dumb. You can replace focus with click with everything below, if you also want the action to happen when the user inserts a tab on the input, which seems likely.

Update 2: I assume you want to make placeholders; see note and example at the end.

---

Original answer :

You can do it:

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

... but it will clear the text no matter what it is. If you want to clear it only if this value is:

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

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

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

Or if it is in the form with id (say, "myForm"), and you want to do this for each field of the form:

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

You can also do this with a delegation:

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

This uses delegate to attach a handler in the form, but apply it to the inputs in the form, rather than hooking a handler for each individual input.

---

If you are trying to make placeholders, there is more than that, and you might want to find a good plugin for this. But here are 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 execute only the above if your code works in a browser that does not support it, in which case you want to invert the logic 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 placholder function detection code .)

Answer 3

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

Answer 4

You can try this

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

Answer 5

I assume that you are trying to create an effect where the text box contains a label. And when the user clicks in the text box, it disappears and allows the user to enter text. You do not need jQuery for this.

 <input type="text" value="Input Text" onfocus="this.value=''" onblur="(this.value=='')? this.value='Input Text':this.value;" /> 

Demo

Answer 6

 function submitForm() { if (testSubmit()) { document.forms["myForm"].submit(); //first submit document.forms["myForm"].reset(); //and then reset the form values } } </script> <body> <form method="get" name="myForm"> First Name: <input type="text" name="input1"/> <br/> Last Name: <input type="text" name="input2"/> <br/> <input type="button" value="Submit" onclick="submitForm()"/> </form> 

Answer 7

If you need localized 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 8

There is an elegant way to do this:

 <input type="text" value="Search" name="" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Pesquisa';}"/> 

Thus, if you enter anything inside the search box, it will not be deleted if you click inside the field again.

Answer 9

try it

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

Answer 10

I would recommend using this, as I have the same issue that is fixed.

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

Answer 11

  enter code here<form id="form"> <input type="text"><input type="text"><input type="text"> <input type="button" id="new"> </form> <form id="form1"> <input type="text"><input type="text"><input type="text"> <input type="button" id="new1"> </form> <script type="text/javascript"> $(document).ready(function(e) { $("#new").click( function(){ //alert("fegf"); $("#form input").val(''); }); $("#new1").click( function(){ //alert("fegf"); $("#form1 input").val(''); }); }); </script>