onclick清除表单字段JavaScript

Question

I hope this question isn't duplicating something in the archives; I've looked but can't find an answer that solves my problem because I seem to be following the advice given.

I am making a dynamic form with JavaScript and would like to clear the prompts in each field when a user clicks in it. Here is part of what I have for one of the form fields. I can't figure out why onlick="this.value=' '"; isn't working. Any help would be much appreciated.

    var VMake1 = document.createElement("input"); 
    VMake1.name = "veh_1_make"; 
    VMake1.type = "text";
    VMake1.value= "Please enter the make of vehicle 1";
    if (VMake1.value=="Please enter the make of vehicle 1") {   
        onclick="this.value=''";    }   
    placeVeh1Make.parentNode.insertBefore(VMake1,placeVeh1Make);

Thank you in advance for your help.

Answer 1

You should look for the onFocus event on the field and set the value of the field to an empty string on that event. This also has the benefit of clearing values from fields if the user tabs through the form input fields.

You also need to reference the VMake1 element when setting the onfocus. So it might look like this:

var VMake1 = document.createElement("input"); 
VMake1.name = "veh_1_make"; 
VMake1.type = "text";
VMake1.value= "Please enter the make of vehicle 1";
VMake1.onfocus = "if (this.value === "Please enter the make of vehicle 1") {this.value='';}";   
placeVeh1Make.parentNode.insertBefore(VMake1,placeVeh1Make);

Note that I moved the conditional into the actual onfocus code.

Answer 2

onclick="this.value=''";

replace with

VMake.onclick="this.value=''"; // or onfocus

or, better yet,

VMake.addEventListener("click", function(){this.value=''}); // or "focus"

If you are willing to use a framework, this is the jQuery way:

$(VMake).click(function(){ //or .focus(...)
  this.value=''
}); 

or even

$(VMake).click(function(){
  $(this).val('')
});