这是所有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
});

现在，你可以用

$("#password").prop("type", "text");

当然，你应该这样做

<input type="password" placeholder="Password" />

除了IE。在IE中也有占位符垫片来模仿这个功能。

作为浏览器安全模型的一部分，很可能会阻止该操作。

编辑:实际上，现在在Safari中测试，我得到的错误类型属性不能更改。

编辑2:这似乎是一个错误直接从jQuery。使用以下直接的DOM代码就可以了:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

编辑3:直接从jQuery源代码来看，这似乎与IE有关(可能是一个bug或他们安全模型的一部分，但jQuery不是特定的):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

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

插件:

(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.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

简单的解决方案，所有人都想在所有浏览器的功能:

HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

jQuery

$("#passwordSwitch").change(function(){
    var p = $('#password');
    var h = $('#passwordHide');
    h.val(p.val());
    if($(this).attr('checked')=='checked'){
        h.hide();
        p.show();
    }else{
        p.hide();
        h.show();
    }
});