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

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

---

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

Here's a Working Demo in Fiddle

First, figure out if you need to use a polyfill in the first place:

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:

$.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, 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, 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.