jQuery

Animated default text for text fields using jQuery


HTML5 has made developers job easier when it came to giving default text for text fields. Be it search field or a form we had to use javascript before to give the default text. Now it’s the ‘placeholder’ attribute that does this trick in HTML5. But there is a need here. The need to be animated with smooth transitions and to be supported by IE8 and below, opera and android browsers. When I was met with this requirement in one of my projects I thought of a work around using Jquery. This had to work in all the browsers and has to be beautiful. So I came up with this solution.

First let’s see what the syntax is for HTML5 default text for text fields.

<input type=text” placeholder="Enter your keyword here…">

There is some work that has gone into making the example look good for this tutorial. But because this tutorial about the animated default text and not CSS3 I will be explaining only about the Jquery part involved in it.

The HTML markup

This is very simple. We have the input fields and its respective labels inside a div. And the labels are wrapped with a span. All divs inside this form are given the same class so that we can position the label in our case the span ‘absolutely’ relative to its respective div. This we do using the CSS which we will see later. Now all the text fields are given the same class ‘overlayField’ so that they can be easily identified with Jquery. Also the spans are given a class ‘overlayLabel’ for the same reason.

<form>
               
       <div class="overlayContainer">
        <input class="overlayField" type="text" name="username" />
                <span class="overlayLabel">Username</span>
      </div>
               
      <div class="overlayContainer">
        <input class="overlayField" type="password" name="password" />
                <span class="overlayLabel">Password</span>
       </div>
               
         <div class="overlayContainer">
        <input class="overlayField" type="text" name="emailId"/>
                <span class="overlayLabel">Email Id</span>
         </div>
               
         <input type="submit" class="submitBtn" value="Submit" />
               
</form>

Now for the CSS

It is important to position the span absolutely over the text field so that we can fade in and fade out them when clicked on their respective input fields. We do this using the following CSS

.overlayContainer {
    position:relative;
    margin:0 0 20px 0;
}

.overlayLabel {
    position:absolute;
    top:6px;
    left:10px;
    color:#999;
    font-size:11px;
    line-height:22px;
}

We position the ‘overlayContainer’ divs relatively so that the ‘overlayLabel’ can be positioned absolute within them. This is the reason we have each input field and its respective label inside a div container.

The real Magic

Let us get the magic started with our custom jquery. Take a look at the entire jquery code below so that I can explain it bit by bit.

$(function(){
   
    // RESET THE VALUES INSIDE THE PAGE ON LOADING
    $('.overlayField').val('');

    // FADEOUT LABEL ON CLICK ON THE TEXT FIELD or THE OVERLAY LABEL
    $('.overlayField, .overlayLabel').focusin(function(){
        $(this).parent().find('.overlayLabel').fadeOut();
        $(this).parent().find('.overlayField').focus();
    });
   
    // ON FOCUS OUT FROM THE LABELS BRING THE TEXT BACK
    $('.overlayField').focusout(function(){
        if( $('.overlayField').val() == '') {
            $(this).parent().find('.overlayLabel').fadeIn();
        }
    });
   
});

Section 1

We first initiate a blank function which in itself means a document.ready() statement. This means that the rest of the code will fire only after the whole HTML page has been loaded by the browser.

Section 2

Next we reset the values inside all the input fields. We do this by getting all the input fields by its class and setting its value (val()) to null. The empty quotes inside the braces (val(‘’)) mean you are setting it to null. The reason to do it is to give the form fresh with no values in it every time the page is loaded.

Section 3

Now to fade out the label on click we use focusin() function of jquery. We use focusin() instead of click() function because it serves two purpose. It fires when clicking and also on tabbing. This function fires whenever the targeted element get a focus (either by tabbing or clicking on the element). Now we get both, the input field and the label which is positioned over it and code to do some actions on focus in. It is time for us to write the code generically so that only the label of its respective input field that is clicked fades out. So every time an input field is clicked or focus is given by tabbing we get the parent of that input field that is clicked and then find the label inside it (overlayLabel) and fade out. We also write an extra line of code so that we give focus (the cursor in this case) to the correct input field.

Section 4

Now what happens on focus out over the input field? This is what the next set of lines are all about – on focusout() function. Jquery enables us to control our element on focus out using this function. But this time it’s not as easy as fading out because we need to check if the input field has actually received any value from the user. So on focus out we check with an ‘if’ condition to see if the user has entered anything in the text field. If not then we fade in the labels again or else we just let it hide as the text field is now filled with a value entered by the user. Again please remember to write the code generically so that I happens specific to the input field that is clicked.

So with just ten lines of jquery code we can get a smooth effect for our text fields. Hope this tutorial helps in your projects. Do let me know if you have suggestions to improve the code and the effect. Put them in the comment area so other readers can share too. Thanks!

Latest Comments

Leave a Reply

comment on this article