Onclick event to remove default value in a text input field

Question

I have an input field:

How would I get it to remove the pre-defined text (Enter Your Name

Answer 1

HTML5 Placeholder Attribute

You are likely wanting placeholder functionality:

Polyfill for Older Browsers

This will not work in some older browsers, but polyfills exist (some require jQuery, others don't) to patch that functionality.

"Screw it, I'll do it myself."

If you wanted to roll your own solution, you could use the onfocus and onblur events of your element to determine what its value should be:

Avoid Mixing HTML with JavaScript

You'll find that most of us aren't big fans of evaluating JavaScript from attributes like onblur and onfocus. Instead, it's more commonly encouraged to bind this logic up purely with JavaScript. Granted, it's a bit more verbose, but it keeps a nice separation between your logic and your markup:

var nameElement = document.forms.myForm.Name;

function nameFocus( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "Enter Your Name") element.value = "";
}

function nameBlur( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "") element.value = "Enter Your Name";
}

if ( nameElement.addEventListener ) {
  nameElement.addEventListener("focus", nameFocus, false);
  nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
  nameElement.attachEvent("onfocus", nameFocus);
  nameElement.attachEvent("onblur", nameBlur);
}

Demo: http://jsbin.com/azehum/2/edit