在IE中显示密码字段的占位符文本

Question

我知道有很多占位符问题,但我想完善我的.

我当前的代码工作得很好并且做了它应该做的事情.问题是,当我去放置"密码"占位符时,它会将占位符放在屏蔽字符中.关于如何解决这个问题的任何想法？

    $(function() {
if(!$.support.placeholder) { 
        var active = document.activeElement;
    $(':text').focus(function () {
        if ($(this).attr('placeholder') != '' && $(this).val() ==  $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
        }
    }).blur(function () {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
        }
    });
    $(':text').blur();
    $(active).focus();
    $('form').submit(function () {
        $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
    });

    var active = document.activeElement;
    $(':password').focus(function () {
        if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
        }
    }).blur(function () {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
        }
    });
    $(':password').blur();
    $(active).focus();
    $('form').submit(function () {
        $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
    });
}
   });

我的传球场:

  <div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>

Answer 1

您也可以尝试这个...它检测到浏览器不支持占位符并适用于所有输入类型

function FauxPlaceholder() {
        if(!ElementSupportAttribute('input','placeholder')) {
            $("input[placeholder]").each(function() {
                var $input = $(this);
                $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
                var $faux = $('#'+$input.attr('id')+'-faux');

                $faux.show().attr('class', $input.attr('class')).attr('style', $input.attr('style'));
                $input.hide();

                $faux.focus(function() {
                    $faux.hide();
                    $input.show().focus();
                });

                $input.blur(function() {
                    if($input.val() === '') {
                        $input.hide();
                        $faux.show();
                    }
                });
            });
        }
    }
    function ElementSupportAttribute(elm, attr) {
        var test = document.createElement(elm);
        return attr in test;
    }

Answer 2

如果我理解正确的话，您希望该字段在未输入任何内容时显示“密码”；但是，“密码”显示为“********”。

对此的一个不错的解决方案（它也会优雅地降级，具体取决于您的编码方式）是：

1. 在密码输入之前放置一个标签。将LABEL的文本设置为“Password”，并将其for属性设置为指向INPUT的ID，以便在单击LABEL时聚焦INPUT。
2. 使用 CSS 将 LABEL 放置在 INPUT 的顶部，以便它们重叠，并且看起来“密码”位于 INPUT 的内部。
3. 使 LABEL 仅在某些 CSS 类 (.showMe应用某些 CSS 类（例如 ）时才可见。
4. 使用 JavaScript 隐藏 LABEL
   • ...如果 INPUT 的值为空字符串
   • ...或者如果用户已选择（聚焦）输入。