How to clear text field on focus of text field

Question

I want to clear the text field when the user clicks on that

Answer 1

try this ,it worked for me

add this into your input tag

<code>
onfocus="this.value='';"</code>

for example if your code is

<code>
<input type="text" value="Name" /></code>

use it like this

<code><input onfocus="this.value='';" type="text" value="Name" /></code>

Answer 2

function Clear (x) {if (x.cleared) {} else {x.value = ""; x.cleared = true}}

onfocus = "Clear (this)"

Answer 3

To do this you will need to use a scripting language, probably javascript. Here an example

<input type='text' value'Some text' onclick='javascript: this.value = ""' />

Hope this helps.

Edit:

To meet what David is explain here is a second example in case that is what you are looking for

<script type='javascript'>
    var clear = true;
    function clear(obj)
    {
        if(clear)
        {
            obj.value = '';
            clear = false;
        }
    }
</script>

<input type='text' value'Some text' onfocus='clear(this);' />

Answer 4

Using jQuery library:

<input id="clearme" value="Click me quick!" />

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

Answer 5

Unless you are doing something specific where you only want to clear onclick, I would suggest (as others have noted) to use the onfocus actions instead. This way if someone is using tab to navigate it will also clear the default text.

You can also use onblur to check if it's empty to bring it back:

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

Answer 6

This is how I use it for a temperature converter/calculator - when the user types (keyup), the text input box calculates using the assigned function; when the user selects the other text input (there are only two inputs), the selected text input will clear.

HTML:

<p class="celcius"><h2 style="color:#FFF">Input:</h2>
    <input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" onfocus="this.value='';" id="celsius" />
</p>

  <hr>

  <h2 style="color:#FFF">Result:</h2>

<p class="fahrenheit">
    <input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" onfocus="this.value='';"placeholder="Temperature (Fahrenheit)" />
  </p>  

JavaScript:

function Conversion() {
    var tempCels = parseFloat(document.getElementById('celsius').value);
      tempFarh =(tempCels)*(1.8)+(32);
      document.getElementById('fahrenheit').value= tempFarh;
 }

function Conversion2() {
    var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
      tempCels =(tempFarh - 32)/(1.8);
      document.getElementById('celsius').value= tempCels;
 }