我猜你可以使用一个包含单词“password”的background-image，并在.focus()上将其更改为空的background-image。

.blur() ----> image with "password"

.focus() ----->图像没有“密码”

你也可以用一些CSS和jQuery来实现。有一个文本字段显示在密码字段的顶部，hide()是在focus()和聚焦在密码字段…

这是所有IE8爱好者的又一个选择，在新浏览器上也能完美运行。您可以只给文本上色以匹配输入的背景。如果你有一个单一的字段，当你点击/聚焦在该字段上时，这将改变颜色为黑色。我不会在公共站点上使用这个，因为它会“迷惑”大多数人，但我在一个只有一个人可以访问用户密码的ADMIN部分中使用它。

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-OR-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

这也是需要的，当您离开字段时，将文本更改为白色。简单，简单，简单。

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[另一选择] 现在，如果你有几个字段，你正在检查，都有相同的ID，因为我正在使用它，添加一个类的“pass”字段，你想隐藏的文本。设置密码字段类型为“text”。这样，只有类为“pass”的字段才会被更改。

<input type="text" class="pass" id="inp_2" value="snoogle"/>

$('[id^=inp_]').click(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#000000');
    }
    // rest of code
});

这是第二部分。这将在您离开字段后将文本更改为白色。

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

更容易……不需要创建所有动态元素。只需创建两个单独的字段，其中一个为“真实”密码字段(type="password")，另一个为“假”密码字段(type="text")，将假字段中的文本设置为浅灰色，并将初始值设置为“password”。然后用jQuery添加几行Javascript代码，如下所示:

    <script type="text/javascript">

        function pwdFocus() {
            $('#fakepassword').hide();
            $('#password').show();
            $('#password').focus();
        }

        function pwdBlur() {
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }
        }
    </script>

    <input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
    <input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />

因此，当用户输入“假”密码字段时，它将被隐藏，真实字段将被显示，焦点将移动到真实字段。他们将永远无法在假字段中输入文本。

当用户离开真实的密码字段时，脚本将查看它是否为空，如果为空，将隐藏真实的字段并显示假的字段。

注意不要在两个输入元素之间留下空格，因为IE会将一个元素置于另一个元素之后(呈现空格)，并且当用户进入/退出字段时，字段会出现移动。

这样就可以了。尽管可以改进为忽略现在不相关的属性。

插件:

(function($){
  $.fn.changeType = function(type) {  
    return this.each(function(i, elm) {
        var newElm = $("<input type=\""+type+"\" />");
        for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
            var attribute = elm.attributes[iAttr].name;
            if(attribute === "type") {
                continue;
            }
            newElm.attr(attribute, elm.attributes[iAttr].value);
        }
        $(elm).replaceWith(newElm);
    });
  };
})(jQuery);

用法:

$(":submit").changeType("checkbox");

小提琴:

http://jsfiddle.net/joshcomley/yX23U/

我已经创建了一个jQuery扩展之间切换文本和密码。适用于IE8(可能也适用于ie6和ie7，但没有测试)，不会丢失你的值或属性:

$.fn.togglePassword = function (showPass) {
    return this.each(function () {
        var $this = $(this);
        if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
            var clone = null;
            if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
                clone = $('<input type="password" />');
            }else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
                clone = $('<input type="text" />');
            }
            $.each($this.prop("attributes"), function() {
                if(this.name != 'type') {
                    clone.attr(this.name, this.value);
                }
            });
            clone.val($this.val());
            $this.replaceWith(clone);
        }
    });
};

效果非常好。你可以简单地调用$('#element').togglePassword();在两者之间切换或给出一个选项来“强制”基于其他东西(如复选框)的动作:$('#element').togglePassword($checkbox.prop('checked'));

我在尝试在Firefox 5中执行此操作时收到了相同的错误消息。

我用下面的代码解决了这个问题:

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

要使用它，只需设置你的字段的onFocus和onBlur属性如下所示:

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

我也将此用于用户名字段，因此它将切换为默认值。只需将函数的第二个参数设置为“当您调用它时”。

同样值得注意的是，我的密码字段的默认类型实际上是密码，以防用户没有启用javascript或出现错误，这样他们的密码仍然受到保护。

美元(文档)。ready函数是jQuery，当文档加载完成时加载。然后将密码字段更改为文本字段。显然，你必须将“password_field_id”更改为密码字段的id。

请随意使用和修改代码!

希望这能帮助到每个和我有同样问题的人:)

——肯特

编辑: 很好的解决方案，但不是绝对的。在FF8和IE8上工作，但不完全在Chrome上(16.0.912.75版本)。Chrome浏览器在页面加载时不显示密码文本。 另外，当自动填充开启时，FF将显示您的密码。