When creating a contact form, I always insert a default value to help the customer fill in the text field. For example, the email text field will say “Please enter your email address”.
However, there is nothing more annoying than having to delete this default value manually – so I am going to use JavaScript events to reset these values.
Creating the HTML
Below is an example of simple HTML document with a basic contact form. Within the value attributes I have added the text which will appear within the text field. I have also linked in an external JavaScript file at the bottom of the document which we will need to create next.
<html> <head> <title>onBlur and onFocus - Tutorial</title> </head> <body> <form> <input type="text" id="email" value="Your Email" /> <input type="text" id="name" value="Your Name" /> <input type="submit" value="Submit" /> </form> </body> <script type="text/javascript" src="script.js"></script> </html>
Creating the external JavaScript file
Copy and paste the following into a JavaScript file called script.js.
var emailField = document.getElementById("email");
emailField.onfocus = function() {
if (emailField.value == "Your Email") {
emailField.value = "";
}
};
emailField.onblur = function() {
if (emailField.value == "") {
emailField.value = "Your Email";
}
};
What I have done here is created a variable called emailField which is equal to the text field “email”. Next I created an anonymous function for the onfocus event which checks the value of emailField. If the value is equal to “Your Email” the value will be reset to nothing. The same steps are taken for the onblur event but in reverse.
Some developers use inline JavaScript to achieve the same result, however I believe it is better practice to keep your HTML and JavaScript separate. It just means you get a much tidier HTML document.
Last updated by at .
13:13 06/11/2011
Really nice post. I agree that the best way is to keep all scripts separate. Even more so now HTML 5 is on the horizon. Keep sharing.
12:32 04/02/2012
I honestly think it is a lot easier and less hassle to include this bit of JS inline with the element.
Maybe it’s just me but this is how I do it: