Javascript 使用jQuery更改输入字段的类型 $（文档）.ready（函数（）{ //#登录框密码字段 $（'#password'）.attr（'type'，'text'）； $（'#password'）.val（'password'）； });

这将把

类型的
密码
输入字段（带有
id=“password”
）更改为普通文本字段，然后填写文本“password”

不过，它不起作用。为什么?

表格如下：








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

编辑：事实上，现在在Safari中测试时，我发现错误
type属性无法更改

编辑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并不具体）：

只需创建一个新字段即可绕过此安全问题：

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');

var$oldPassword=$（“#密码”）；
var$newPassword=$（“”）
.val（$oldPassword.val（））
.appendTo（$oldPassword.parent（））；
$oldPassword.remove（）；
$newPassword.attr（'id'，'password'）；
无法更改类型属性。您需要用文本输入替换或覆盖输入，并在提交时将值发送到密码输入。
使用jQuery的终极方法：


在屏幕上隐藏原始输入字段

$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input

通过JavaScript动态创建新的输入字段

var new_input = document.createElement("input");

将ID和值从隐藏的输入字段迁移到新的输入字段

new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input

要绕过IE上的错误，例如不能更改
类型属性
，您可能会发现这很有用，如下所示：

将click/focus/change事件附加到新的输入元素，以便在隐藏的输入上触发相同的事件

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

旧的隐藏输入元素仍在DOM中，因此将对新输入元素触发的事件作出反应。当ID被交换时，新的输入元素将像旧的一样，响应对旧的隐藏输入ID的任何函数调用，但看起来不同

有点棘手，但很有效！！！；-）

更容易。。。不需要创建所有的动态元素。只需创建两个单独的字段，一个是“真实”密码字段（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()" />


函数pwdFocus（）{
$（“#伪造密码”）.hide（）；
$（“#密码”）.show（）；
$（“#密码”）.focus（）；
}
函数pwdBlur（）{
if（$（'#password'）.attr（'value'）=''）{
$（“#密码”）.hide（）；
$（“#伪造密码”）.show（）；
}
}

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

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

请注意不要在两个输入元素之间留空格，因为IE会将一个元素放置在另一个元素之后一点（呈现空格），当用户进入/退出该元素时，该字段似乎会移动。
我没有在IE中测试过（因为我需要一个iPad站点）-我无法更改HTML，但我可以添加JS:

document.getElementById('phonenumber').type = 'tel';

（与所有jQuery相比，老式的JS更难看！）

但是，链接到MSDN：“从Microsoft Internet Explorer 5开始，type属性只能读/写一次，但只有在使用createElement方法创建输入元素并将其添加到文档之前。”因此，您可以复制该元素、更改类型、添加到DOM并删除旧的元素？
使用此属性非常简单

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

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

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

<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>


$（文档）.ready（函数（）
{
var passfield=document.getElementById（'password_field_id'）；
passfield.type='text'；
});
函数focusCheckDefaultValue（字段、类型、默认值）
{
如果（field.value==defaultValue）
{
field.value=''；
}
如果（类型==“通过”）
{
field.type='password'；
}
}
函数blurCheckDefaultValue（字段、类型、defaultValue）
{
如果（field.value==''）
{
field.value=默认值；
}
if（type='pass'&&field.value==defaultValue）
{
field.type='text'；
}
else if（type='pass'&&field.value！=defaultValue）
{
field.type='password'；
}
}

要使用它，只需将字段的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');">



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

另外，可能值得注意的是，my password字段的默认类型实际上是password，以防用户没有启用javascript，或者如果出现问题，他们的密码仍然受到保护

$（document）.ready函数是jQuery，当文档加载完毕时加载。然后将密码字段更改为文本字段。显然，您必须将“password\u field\u id”更改为密码字段的id

请随意使用和修改代码

希望这能帮助所有和我有同样问题的人：）

--希杰·肯特

编辑：
好的解决方案，但不是绝对的。适用于FF8和IE8，但不完全适用于Chrome（16.0.912
<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');">

  $(function() {
    $("#id_select_multiple").change(function() {
     var new_type='';
     if ($(this).is(":checked")){ // .val() is always "on"
          new_type='checkbox';
     } else {
         new_type="radio";
     }
     $('input[name="foo"]').each(function(index){
         var new_input = $(this).clone();
         new_input.attr("type", new_type);
         new_input.insertBefore($(this));
         $(this).remove();
     });
    }
  )});

$('#pass').focus(function() { 
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});

<input id='pass' size='70' type='text' value='password' name='password'>

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

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

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

this.type = 'password';

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

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

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

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

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

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

myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;

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

$.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);
        }
    });
};

$(document).delegate('input[type="text"]','click', function() {
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
}); 
$(document).delegate('input[type="password"]','click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
}); 

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

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

$('#newpassword_field').attr("type", 'text');

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

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

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

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