使用 jQuery 更改输入字段的类型（文本 -> 密码）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6402484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the type of an input field using jQuery (text -> password)
提问by user1946705
I am trying to change type of input, specifically after click into input change type="text" to change="password".
我正在尝试更改输入类型，特别是在单击输入后更改type="text" 到 change="password"。
I don't know why, but I can't to add the option type="password"as attribute to input.
我不知道为什么，但我不能将选项type="password"添加为输入的属性。
$('input#id_reg_pass').removeAttr("type"); #this works, type="text" is removing
$('input#id_reg_pass').attr('type', 'password'); #problem, this not works
$(this).addClass('exampleText').val($(this).attr('title'));
Haven't someone similar problem? I'll glad for every hint... Thank you
没有人有类似的问题吗？我会为每一个提示感到高兴...谢谢
回答by karim79
If you're using jQuery 1.6, use .propinstead:
如果您使用的是 jQuery 1.6，请.prop改用：
$('input#id_reg_pass').removeAttr("type");
$('input#id_reg_pass').prop('type', 'password');
$(this).addClass('exampleText').val($(this).attr('title'));
回答by Niklas
You cannot change the attribute typeafter adding the element to the DOM, if you want it to function the same way on all browsers, see thisand this.
type将元素添加到 DOM 后，您无法更改属性，如果您希望它在所有浏览器上以相同的方式运行，请参阅this和this。
As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.
从 Microsoft Internet Explorer 5 开始，type 属性是读/写一次，但仅当使用 createElement 方法创建输入元素时且在将其添加到文档之前。
回答by user1844655
I had exactly the same problem, I wanted to show a text in a password field until the user clicked over it. I did another approach, instead to try to change the type of the field I hide it and showed a new text field, then called the focus(). It works fine.
我遇到了完全相同的问题，我想在密码字段中显示一个文本，直到用户单击它为止。我做了另一种方法，而是尝试更改字段的类型，我隐藏它并显示一个新的文本字段，然后调用 focus()。它工作正常。
$("#password_fake").focus(){
$(this).hide();
$("#password").show().focus();
}
where #password_fake is a text field and #password a password field with style="display:none".
其中#password_fake 是一个文本字段，#password 是一个带有 style="display:none" 的密码字段。
回答by Matthew Scharley
Your code throws an error for me, type property can't be changed. Interestingly though, the following code does work for me on Chrome at least:
你的代码为我抛出了一个错误，type property can't be changed。有趣的是，以下代码至少在 Chrome 上对我有用：
$('input#id_reg_pass')[0].type = 'password';
It could be that this doesn't work cross-browser however, which would explain why jQuery doesn't allow it (As pointed out by Niklas, this is the case). Alternatively you could construct a new <input>with the same attributes and replace the old one with it.
然而，这可能无法跨浏览器工作，这可以解释为什么 jQuery 不允许它（正如 Niklas 指出的那样，情况就是这样）。或者，您可以构造一个<input>具有相同属性的新对象，并用它替换旧的。
回答by Suresh Pattu
Try this demo is here
试试这个演示在这里
$(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+'">');
});
