这样工作起来更容易:

document.querySelector('input[type=password]').setAttribute('type', 'text');

为了再次将其转回password字段，(假设password字段是带有文本类型的第二个输入标记):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')

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

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浏览器进行了测试——对其他任何浏览器都不能保证!

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

编辑:实际上，现在在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";

一步解决方案

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

一个更跨浏览器的解决方案……我希望这篇文章的要点能帮助到一些人。

此解决方案尝试设置type属性，如果失败，则简单地创建一个新的<input>元素，保留元素属性和事件处理程序。

changetypeatr .js (GitHub Gist):

/* 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;
    }
}

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