rebugged <insert pompous tag line here>

Hi folks, today we are going to write a simple, yet useful jQuery plugin. The plugin we write is named The jQuery Placeholder plugin.

The problem:- A very useful feature that was introduced in HTML5 was the ‘placeholder’ attribute [W3C Spec] for forms. The placeholder attribute lets us specify a default value for textfields (and other form elements). The default value/placeholder text will be shown if the user hasn’t entered a value in the textfield. Sounds handy right? But the problem is that as HTML 5 is not widely supported, only few browsers support the placeholder attribute currently. (As you could imagine, Internet Explorer doesn’t support, yet.)

Our goal:- Simulate the placeholder effect in older browsers that don’t support HTML5 placeholders and if the browser supports placeholder attribute, then fall back and use the native support instead.

HTML5 Placeholder Effect

And the fun part:- We are writing a jQuery plugin to do that 🙂

In this post, we are going to implement the basic functionality and later we will look at progressively enhancing our plugin.

Before We Start

Demo of what we are going to write.

You can write your plugin code inside a text file and save it as file-name.js. But try sticking to the convention ‘jquery.pluginName.js’ when naming your plugin file. So we are going to save our placeholder plugin code in a file known as jquery.placeholder.js

Step 1: Laying The Foundation

Let us lay the foundation of our jQuery plugin. Once the foundation is laid, we can build our plugin over it easily.

Every jQuery plugin is added as a property of the jQuery.fn object. The name of the property is the name of our plugin.

$.fn.placeholder = function() {

    // plugin code goes here

}

If you didn’t know already, $ is a shortcut to the jQuery object. In your script it is the same to use  ‘jQuery‘ or just the ‘$’ sign. But $ sign might collide with other code or libraries used in the same page, so, as the jQuery Plugin authoring documentation recommends, it is better to use the name ‘jQuery‘ itself or explicitly assign the jQuery object to the $ symbol within the context of our plugin code as follows:-

(function($) {
  $.fn.placeholder = function() {

    // plugin code goes here

  };
})(jQuery);

That was it. We  have laid the foundation. Now within out plugin function, $ will always refer to the jQuery object.

Now all we need to do is to add our plugin code to the foundation. You can invoke your plugin code on any element in your web page by calling the plugin method like this:-

<script type="text/javascript">
   $(document).ready(function() {     $('input').placeholder(); });

   /* Only $('input').placeholder() is needed to invoke your plugin.
    But leaving out $(document).ready() might give you unexpected results. */
</script>

Step 2: Writing the functional code of our plugin

I have divided the functional code into 3 parts:-

Step 2.1 – Show the placeholder text inside the textbox when the page is loaded

// Getting the value specified for the currently selected elements 'placeholder' attribute
var placeholderText = this.attr('placeholder');

if (this.val() == '') {
    this.val(placeholderText);
}

The code is self explanatory. We fetch the placeholder text specified for the selected element and assign it to the variable placeholderText. For this we use the .attr() method, which returns the value of the specified attribute.

Then we are checking whether the text field is empty. If the text field is empty, set the previously fetched placeholder text as the value of the element. For both of this (checking and setting), we are using the jQuery method .val() which can get or set the ‘value’ property of any element that has a ‘value’ attribute.

Oh by the way, have you noticed that we are using just this instead of the usual $(this) that we usually use in our code. This is because, inside the immediate scope plugin function this itself refers to the jQuery object of the element it is invoked on. No need to wrap this inside $(). Don’t worry if it sounds fishy. We will soon see when to use $(this) instead of this.

Now the following text field will show the text ‘Name’ in it when the page is loaded.

Our textbox will appear like this in older browsers.

Step 2.2 – Hide the default (placeholder) text when the user clicks inside the textbox

Now when somebody clicks inside the textbox, we need the placeholder text to be hidden. The following code will do that.

this.click(function() {
    // when someone clicks inside the text field, check if the user had
    // entered anything inside the text box OR changed the default text.
    // If the user hadn't entered anything, clear the textbox.
    if ($(this).val() == placeholderText) {
        $(this).val('');
    }
});

You might have noticed that now we are using $(this) instead of just this. This is because, when inside callback functions, just using this will not refer to the jQuery object, we have to use $(this) to refer to the jQuery object. In this case we are using $(this) inside the callback function of the click method. (SPOILER: When a function is passed as an argument to another function, the passed function is called the callback function.)

Step 2.3 – Restore the placeholder text when the user clicks outside the textbox

Next we need to restore the placeholder text when the user clicks outside of the textbox (a.k.a when the textbox loses focus or is blurred, when said in technical terms, duh!)

this.blur(function() {
    // If the textbox is empty, restore the placeholder text
    if ($(this).val() == '') {
        $(this).val(placeholderText);
    }
});

That was it!! Now your plugin will show placeholder text even in older browsers (read Internet Explorer and the sort). But modern browsers like Firefox (3.7+) and Chrome/Safari (4.0+) supports HTML5 placeholder attribute natively. So in such cases, it is better to make our plugin code fall back and use the browser’s native placeholder support instead.

Step 3: If the browser natively supports HTML5 placeholder attribute, use it instead of our plugin code.

Ok, this step is easy.

var input = document.createElement('input');
if ('placeholder' in input) {
    return this;
}

Add the above code as the first thing inside your plugin foundation. The code checks if the browser supports placeholder attribute for ‘input’ elements (<input type=” ” />). If the browser supports placeholder, we immediately exit from the placeholder function using the return statement. Note that we are returning this instead of just return; or return true; or anything like that. We did it because jQuery recommends we always return this when exiting our plugin code (This is to maintain a cool feature of jQuery known as chainability). So dont forget to add a return this; at the end of our plugin code too.

What is Next?
We have implemented a plugin with the bare minimum features. (still not bad, okay!). Our plugin has limitations. For example, it won’t work as we intend on password fields or won’t work at all in textareas. In the next post, we will see how we can enhance our plugin to support password fields and textareas and also add some more coolness to our already awesome plugin :).

You can download the full plugin code here.

By the way, did you wonder how I ran both Firefox 9 and 3.6 at the same time?? (Yeah, I did that B-) ). To know how to do that checkout the post How to run multiple Firefox versions at the same time.

Please let me know your questions and suggestions in the comment form below.

Also, if you like the post, please share it with your friends. If you don’t, just share it in Facebook okay ;), so the whole world will know how bad I write.