最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - "Password" gets displayed as "********" in IE for placeholder - Stack Overflow

programmeradmin1浏览0评论

I am using HTLM5 placeholder and added modernizr.js to make it work in IE. The code segment is :

<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 is working fine for other browser and i want to display the text for input type password in IE but instead it puts the placeholder in the masking characters. How can the "Password" text be displyed.

I am using HTLM5 placeholder and added modernizr.js to make it work in IE. The code segment is :

<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 is working fine for other browser and i want to display the text for input type password in IE but instead it puts the placeholder in the masking characters. How can the "Password" text be displyed.

Share Improve this question asked Oct 25, 2011 at 7:06 user850234user850234 3,46315 gold badges52 silver badges84 bronze badges 3
  • 6 I'd suggest not to reinvent this particular wheel, unless you really like wheels. :) github./Modernizr/Modernizr/wiki/… – deceze Commented Oct 25, 2011 at 7:09
  • 2 Weird. I shouldnt work in any browsers, since as long as it has type=password it should hide the text. What you could do is just add attr('type','text') when you enter placeholder text, and revert it back when you remove placeholde rtext :) – Marco Johannesen Commented Oct 25, 2011 at 7:12
  • A password field really doesn't need a place holder, just give it a label to tell users what it's for. – RobG Commented Oct 25, 2011 at 7:19
Add a ment  | 

2 Answers 2

Reset to default 4

The problem is that your placeholder fallback script is using the field's value to show the placeholder.

Password fields, of course, hide their value, so this technique will fail on password fields in exactly the way you described.

What you need is a placeholder script which works by writing the placeholder text into an extra element which is overlaid on top of the field (or behind it if the field's background is transparent). The script can then alter this element, rather than altering the field's value.

There are a whole load of scripts available which do exactly this - this one, for example (but there are many others too).

The other option is to dynamically change the field type from password to text and back again whenever the placeholder is toggled. This might be a quicker win to fit into your existing code, but I'd remend using the other technique instead for the long term.

Hope that helps.

Try using this code... I hope it will help 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('');
      })
    });
  }
});
/* ]]> */
发布评论

评论列表(0)

  1. 暂无评论