我已经创建了一个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'));

下面是允许您更改文档中元素类型的一小段代码。

jquery.type.js (GitHub Gist)

var rtype = /^(?:button|input)$/i;

jQuery.attrHooks.type.set = function(elem, value) {
    // We can't allow the type property to be changed (since it causes problems in IE)
    if (rtype.test(elem.nodeName) && elem.parentNode) {
        // jQuery.error( "type property can't be changed" );

        // JB: Or ... can it!?
        var $el = $(elem);
        var insertionFn = 'after';
        var $insertionPoint = $el.prev();
        if (!$insertionPoint.length) {
            insertionFn = 'prepend';
            $insertionPoint = $el.parent();
        }

        $el.detach().attr('type', value);
        $insertionPoint[insertionFn]($el);
        return value;

    } else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
        // Setting the type on a radio button after the value resets the value in IE6-9
        // Reset value to it's default in case type is set after value
        // This is for element creation
        var val = elem.value;
        elem.setAttribute("type", value);
        if (val) {
            elem.value = val;
        }
        return value;
    }
}

它通过从文档中删除输入、更改类型然后将其放回原来的位置来解决这个问题。

请注意，这段代码只针对WebKit浏览器进行了测试——对其他任何浏览器都不能保证!

我在尝试在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将显示您的密码。

我只是做了以下改变输入的类型:

$('#ID_of_element')[0].type = 'text';

这很有效。

我需要这样做，因为我在一个asp.net Core 3.1项目中使用jQuery UI datepickers，他们在基于chromium的浏览器上不能正常工作(参见:https://stackoverflow.com/a/61296225/7420301)。

简单:

this.type = 'password';

如

$("#password").click(function(){
    this.type = 'password';
});

这是假设您的输入字段事先设置为“text”。

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

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