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

Or you can simply use the placeholder attribute For example<input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>

Answer 2

Add a following script to your js file:

var input1 = document.getElementById("input1")

input1.onfocus = function() {
  if(input1.value == "Enter Postcode or Area") {
      input1.value = "";
  } 
};

input1.onblur = function() {
    if(input1.value == "") {
       input1.value = "Enter Postcode or Area";
   } 
 };

Answer 3

You can use <input ... onfocus="this.value='';"/>.

This way, the field will be cleared when it gains focus. However, if you only want to clear it when user clicks on it (i.e. not when the field gains focus with the keyboard for example), then use onclick instead of onfocus.

However, as pointed by David Dorward in a comment, this behavior may not be expected by the user. So be careful to set this feature on really specific fields (such as search field).