Month: June 2013

So as you know the “placeholder” attribute is supported only in the newest browsers. If you want a placeholder in all browsers you’ll need to write some JavaScript and here is how to do it.

Using my approach you’ll need to set up both the value and the title tag of the input element to the placeholder you want to use. Here is an HTML example:

<form action="" method="post" id="contact-form">
            <input type="text" name="name" id="name" value="Your name" title="Your name"/>

            <input type="text" name="subject" id="subject" value="Subject" title="Subject" />

            <input type="text" name="email" id="email" value="Your email address" title="Your email address" />

            <textarea name="msg" id="msg" title="Your message">Your message</textarea>

            <input type="submit" id="contact-form-submit" value="Send" />
</form>

Here is some css just to make it more pleasing

#contact-form textarea, #contact-form input[type=text] {
    border: none;
    padding: 10px;
    margin: 0 0 15px 0;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    font-size: 15px;
    resize: vertical;
    background-color: rgb(197, 236, 255);
    width: 320px;
    color: rgb(0, 70, 158);
}

and here comes jQuery, watch the comments

jQuery(document).ready(function(){
    // on focusing
    jQuery('#contact-form input[type=text], #contact-form textarea').focus(function() {
        // check if the current value equals the one in the title attribute
        if ( jQuery(this).val() == jQuery(this).attr("title")) {
            // if so replace the current value with empty string or no value
            jQuery(this).val("");
        }
    });

    // on blur or the input element going out of fucus
    jQuery('#contact-form input[type=text], #contact-form textarea').blur(function() {
        // check if the current value is empty
        if ( jQuery(this).val() == "") {
            // if it is empty set the value to the text in the title attribute( restoring the placeholder )
            jQuery(this).val($(this).attr("title"));

            // this is just a beauty touch
            // when the placeholder is active set the color to something more neutral
            // so that the user can notice the difference between a placeholder and actual value
            jQuery(this).css("color", "rgb(24, 179, 255)");
        }
    });

    // this also part of the beauty touch
    // if you don't mind the color of the placeholder you can skip this
    // check if the user has just pressed a key
    jQuery('#contact-form input[type=text], #contact-form textarea').keyup(function() {
        // if so set the color to slightly darker tone
        // this is again only in order for the user to be able to make the difference
        // between a placeholder and a value easily
        jQuery(this).css("color", "rgb(0, 70, 158)");
    });
});

That’s all you need