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

编辑：确实，现在在 Safari 中进行测试，我收到了错误type property cannot be changed。

编辑 2：这似乎是直接来自 jQuery 的错误。使用以下直接的 DOM 代码可以正常工作：

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

编辑 3：直接来自 jQuery 源代码，这似乎与 IE 相关（并且可能是错误或其安全模型的一部分，但 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";

一步解决

$('#password').get(0).type = 'text';

更简单……不需要创建所有动态元素。只需创建两个单独的字段，使一个“真实”密码字段（type="password"）和一个“假”密码字段（type="text"），将假字段中的文本设置为浅灰色，然后将初始值设置为“密码”。然后使用 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 会一个接一个地放置（渲染空间），并且当用户进入/退出时，该字段会出现移动。

如今，您只需使用

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

但当然，你真的应该这样做

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

除了 IE。也有占位符垫片可以在 IE 中模拟该功能。

一个更跨浏览器的解决方案......我希望这个要点可以帮助那里的人。

此解决方案尝试设置type属性，如果失败，它只会创建一个新<input>元素，同时保留元素属性和事件处理程序。

changeTypeAttr.js（GitHub 要点）：

/* x is the <input/> element
   type is the type you want to change it to.
   jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
    x = $(x);
    if(x.prop('type') == type)
        return x; //That was easy.
    try {
        return x.prop('type', type); //Stupid IE security will not allow this
    } catch(e) {
        //Try re-creating the element (yep... this sucks)
        //jQuery has no html() method for the element, so we have to put into a div first
        var html = $("<div>").append(x.clone()).html();
        var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
        //If no match, we add the type attribute to the end; otherwise, we replace
        var tmp = $(html.match(regex) == null ?
            html.replace(">", ' type="' + type + '">') :
            html.replace(regex, 'type="' + type + '"') );
        //Copy data from old element
        tmp.data('type', x.data('type') );
        var events = x.data('events');
        var cb = function(events) {
            return function() {
                //Bind all prior events
                for(i in events)
                {
                    var y = events[i];
                    for(j in y)
                        tmp.bind(i, y[j].handler);
                }
            }
        }(events);
        x.replaceWith(tmp);
        setTimeout(cb, 10); //Wait a bit to call function
        return tmp;
    }
}