Clear input field on focus and vice versa

Context:

Web forms are popular… very popular. Occasionally, the need arises to have an input field display text by default, but then remove it on focus. In other words, when touched by the cursor.

For example, a field can show the message, “Enter email to subscribe”… and then remove it automatically when the user wants to type in it.

Solution:

1. Use the following javascript

<script language="javascript">
     <!--
     function ClearForm() {
         document.subscription.email.value= "";
     }

     function FillForm() {
         if ( document.subscription.email.value == "" )
         {
             document.subscription.email.value=
                          "Enter email to subscribe.";
         }
     }
     //-->
</script>

2. Coupled with the following form

<form action="" method="post" name="subscription">
    <input name="email" type="text"  class="keywords"
         value="Enter email to subscribe."
         onfocus="ClearForm();" onblur="FillForm();"
    />
    <input name="" type="image" src="images/submit.gif" />
</form>

And that’s all to it. Simple don’t you think !?

Alhumdulillah.

Advertisement