How to Remove text when you Click on an Input Field

This is the first post that focuses on answering questions sent to me by users. So if you have a question that you would like to be answered in a how to then please feel free to contact me.

So what do I mean when I say remove text when you click on an input field?

When you have a contact form, or an email sign up form you will sometimes see some pre existing text, for an email field, it might say, enter your email. Similar to my contact form. To do this we need a contact form as an example and then we will learn how to modify the input fields and apply onblur and onfocus, you will see further down.

form input fields

The most basic form would look something like this.

<form id="contact" method="post" action="">
<fieldset>    

<label for="name">Name</label>
<input type="text" name="name">

<label for="email">E-mail</label>
<input type="email" name="email">

<input type="submit" name="submit" id="submit" value="Send Message" />

</fieldset>
</form>

The above code has 2 input fields and a submit button.

As it stands it would just produce the following.

 minus submit button, because I don’t want people to sit clicking it all day





Which looks a little messy, I for one don’t like the field name being outside the input field. So to change that we need to add a value and remove the labels.

<form id="contact" method="post" action="">
<fieldset> 

<input type="text" name="name" value="Name">

<input type="email" name="email" value="Email">

<input type="submit" name="submit" id="submit" value="Send Message" />

</fieldset>
</form>

Now we have something like this.



Ok so now its starting to look better.

As it stands, if you click on one of the input fields above you would have to delete the text before you can even write something, that’s bad for anyone, because let’s be honest, we are just too lazy to hit the delete button. Why give your users something extra to do, even if it only takes a second.

This is where the magic happens.

Now we need to adjust our input fields one more time by adding a simple piece of JavaScript, this one to be exact.

onblur="if(this.value == '') { this.value = 'Enter Your Email'; } " onfocus="if(this.value == 'Enter Your Email') { this.value = ''; }"

What this says is if the field is empty and the user has deselected it, add this value.

Alternatively, as you probably guessed, the other half says if the user has clicked on the input field and this value exist remove it and display an empty field.

So now we adjust our form fields like so.

<form id="contact" method="post" action="">
<fieldset>    

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

<input type="email" name="email" value="Enter Your Email" onblur="if(this.value == '') { this.value = 'Enter Your Email'; } " onfocus="if(this.value == 'Enter Your Email') { this.value = ''; }">

<input type="submit" name="submit" id="submit" value="Send Message" />

</fieldset>
</form>

This simple piece of logic will happily add and remove the values all day long, and you can try it yourself below.



Note – if you use a placeholder instead of value, it wont work.

That’s all, hope you learned something today.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

2 comments… add one
  • Vivek R Mar 13, 2013, 7:27 am

    Thanks for this tip,usually I use placeholder property for example

    • Matthew Horne Mar 13, 2013, 8:58 am

      Yes a lot of people do but I prefer to use onblur and onfocus for input fields.

Leave a Comment