You can use this [polyfill library][polyfill library] with the setting `{hideOnFocus : false}` - 
[Here's a demo][polyfill demo]

-----

A homerolled approach is going to be a little longer, but here goes:

# [Here's a Working Demo in Fiddle][fiddle]

First, figure out if you [need to use a polyfill in the first place][placeholder feature detection]:

    function placeholderIsSupported() {
        var test = document.createElement('input');
        return ('placeholder' in test);
    }

Then select everything that has the placeholder attribute  `[placeholder]` and loop through each:

    function placeholderPolyfill() {
        // added for purposes of debugging on modern browsers
        var alwaysUsePolyfill = true;
    
        if (alwaysUsePolyfill || !placeholderIsSupported()) {
            $("input[placeholder]").each(function() {
                // place code here
            });
        }
    }

For each element, we want to assign the `value` of the control with the value in the `placeholder` and add a class so we can make it look different than regular input text:

    $(this).val(this.placeholder)
           .addClass('placeholder')

Here I'm using a shade of blue to help differentiate it for the purposes of debugging, but you might want to pick a shade of grey.

    input.placeholder {
        color: #1A89AD;
    }


We'll also need a way to [place the caret/cursor at the beginning of the text][Set Cursor Position]:

    $.fn.selectRange = function(start, end) {
        if(!end) end = start; 
        return this.each(function() {
            if (this.setSelectionRange) {
                this.focus();
                this.setSelectionRange(start, end);
            } else if (this.createTextRange) {
                var range = this.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', start);
                range.select();
            }
        });
    };

Normally, polyfills work by clearing the `value` when the `onfocus` event fires. But not us, right guy. In order to work around this, we'll listen to three different events.  We want to know when the control is focused (`mouseup keyup`), when typing has started (`keydown`), and when typing has finished (`keyup`).

Here's each one:

When the element gets focus, we want to move the cursor to the beginning.  Because of [complications with the way chrome sets the cursor during the focus event][chrome focus cursor position], we have to listen to `mouseup` and `keyup` instead.

    .on('mouseup keyup': function(e) {
         // if we moused or tabbed in
         if (e.type == "mouseup" ||  e.keyCode == 9) {
             // pretend like their are no chars
             $(this).selectRange(0);
         }
    });

When someone starts typing, if the current value is equal to the placeholder value, then we'll clear out the text to make room for more typing.  On the keyup we can replace the text if need be.  Since tabbing through the fields will [fire a keyup on the next field, not the current one][tab keyup], if the keydown that was pressed was the tab key, we'll also trigger the keyup event manually.

    .on('keydown': function(e)
         // check if we still have the placeholder
         if (this.value == this.placeholder) {
             $(this).val('').removeClass('placeholder'); 
         } 
         // if tab key pressed - run keyup now
         if (e.keyCode == 9) {
             $(this).trigger('keyup');
         }
    });

Finally when the keystrokes are done being registered, let's re-check the input.  If we don't have any values, we've either cleared the area or deleted the last character.  Either way, let's repopulate the value, add back the placeholder class, and set the caret to the beginning again:

    .on('keyup': function(e)
          // if we're back to zero 
          if (this.value.length === 0) {
              // add placeholder back
               $(this).val(this.placeholder)
                      .addClass('placeholder')
                      .selectRange(0);
          }
    });

That's pretty much it.  See the fiddle for the full code sample.

[polyfill library]: https://github.com/ginader/HTML5-placeholder-polyfill
[polyfill demo]: http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-chromeish.html

[placeholder feature detection]: https://stackoverflow.com/a/8263907/1366033
[Set Cursor Position]: https://stackoverflow.com/a/841121/1366033
[chrome focus cursor position]: https://stackoverflow.com/q/3150275/1366033
[tab keyup]: https://stackoverflow.com/a/18020246/1366033

[fiddle]: http://jsfiddle.net/KyleMit/An9t6/

I am using this fix http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html for placeholder feature for IE which works fine but I would like the placeholder text to remain till at least a single character is typed. I have tried the following which isn't working for me (the bit in the asterisk (**) is my addition:

    if (input.val() == input.attr('placeholder') **&& input.val().length>0** ) {
		input.val('');
		input.removeClass('placeholder');    
    }

Thanks