"Password" appears as "********" in IE for the alternate

Question

I use HTLM5 placeholder and added modernizr.js to make it work in IE. Code Segment:

<input type="password" placeholder="Password"> function hasPlaceholderSupport() { var input = document.createElement('input'); return ('placeholder' in input); } $(document).ready(function(){ if(!Modernizr.input.placeholder){ $('[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(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); } }); 

It works fine for another browser, and I want to display the text for input type password in IE, but instead it puts the placeholder in masking characters. How can I disable the text "Password" .

Answer 1

The problem is that your backup stub script uses the field value to show the placeholder.

Password fields, of course, hide their meaning, so this method will fail in the password fields exactly as you described.

What you need is a placeholder script that works by writing placeholder text to an extra element that overlays on top of the field (or behind it if the background of the field is transparent). The script can then change this element, rather than changing the value of the field.

There are a number of scripts available that do just that: this one, for example (but there are many others).

Another option is to dynamically change the type of the field from password to text and vice versa each time the placeholder is switched. It might be faster to win to fit into your existing code, but I would recommend using a different technique instead in the long run.

Hope this helps.

Answer 2

Try using this code ... Hope this helps you.

 /* <![CDATA[ */ $(function () { var input = document.createElement("input"); if (('placeholder' in input) == false) { $('[placeholder]').focus(function () { var i = $(this); if (i.val() == i.attr('placeholder')) { i.val('').removeClass('placeholder'); if (i.hasClass('password')) { i.removeClass('password'); this.type = 'password'; } } }).blur(function () { var i = $(this); if (i.val() == '' || i.val() == i.attr('placeholder')) { if (this.type == 'password') { i.addClass('password'); this.type = 'text'; } i.addClass('placeholder').val(i.attr('placeholder')); } }).blur().parents('form').submit(function () { $(this).find('[placeholder]').each(function () { var i = $(this); if (i.val() == i.attr('placeholder')) i.val(''); }) }); } }); /* ]]> */