jQuery HTML5 placeholder fix.js

// Released under MIT license: http://www.opensource.org/licenses/mit-license.php

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

This is really good and I've seen a lot of other improvements but I have one thing that one of my clients showed me that I thought was interesting. In IE8 with this plug and play code when you click in the input field the value or are make shift "Placeholder" in this case disappears. This behavior is not consistent with actual placeholders.

Actual placeholders are still visible when the user clicks into an input field. Only once the user starts typing does the placeholder go away. So I tried recreating this experience because my client said that is confusing. I think it is personally fine the way it is when you click in and the "Placeholder" goes away but the client is always right so I decided that I would make a small change to this snippet.

Instead of doing .focus I used .keypress and it seemed to work okay. Kind of weird but was wondering if anyone either suggested this solution or if someone had a better solution for this situation.

It seems to be problem with IE 8. So when i have placeholder text where I have a password field. It replaces with *** in value.
please suggest me a solution.

I can by the way confirm that this doesn't work as expected in MSIE 8, the placeholders don't show up on page load.

Just as an aside, this would NEVER have worked as expected, because the original code never loads the contents of the placeholder on page load.

I'll fork this with correct code, and link to that, rather than adding more confusion to this page.

Again, I would recommend against using the top code as is because it's incomplete and technically wrong, but the core logic is fine, just incomplete and inadequate to most standard use cases. It looks like it wasn't actually tested on the browsers it was targeted at since the issues would have been obvious immediately.

This is imperfect way. please refer https://github.com/mathiasbynens/jquery-placeholder.