Question

我正在使用HTLM5占位符并添加了modernizr.js以使其在IE中运行。代码段是：

<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('');
                }
            })
        });

    }
});

它适用于其他浏览器，我想在IE中显示input type password的文本，但它将占位符放在屏蔽字符中。如何显示"Password"文字。

Answer 1

问题是您的占位符后备脚本使用字段的值来显示占位符。

密码字段当然会隐藏它们的值，因此这种技术将在密码字段中失败，完全按照您描述的方式。

你需要的是一个占位符脚本，它通过将占位符文本写入一个覆盖在字段顶部的额外元素（如果字段的背景是透明的，则在其后面）来工作。然后脚本可以改变这个元素，而不是改变字段的值。

有大量可用的脚本可以完成此操作 - this one, for example（但还有很多其他脚本）。

另一个选项是将字段类型从password动态更改为text，并在切换占位符时再次返回。这可能是一个更快的胜利，以适应您现有的代码，但我建议长期使用其他技术。

希望有所帮助。

Answer 2

尝试使用此代码...我希望它能为您提供帮助。

/* <![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('');
      })
    });
  }
});
/* ]]> */

“密码”在占位符的IE中显示为“********”

2 个答案: