jQuery 将属性“类型”从文本更改为密码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5609165/
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 Attribute "type" from text to password
提问by AndrewFerrara
Why isn't the jQuery changing the type attribute of #password_input to password?
为什么 jQuery 不将 #password_input 的类型属性更改为密码？
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#password_input").attr('type','password');
});
</script>
</head>
<body>
<div id="loginBox">
<form>
<input type="text" id="username_input" name="username" /><br />
<input type="text" id="password_input" name="password" />
</form>
</div>
</body>
</html>
采纳答案by JClaspill
'type' property/attribute cannot be changed.
'type' 属性/属性不能更改。
edit: This was accurate for JQuery at the time it was posted. See other answers for how it can be done now.
编辑：这在 JQuery 发布时是准确的。请参阅其他答案以了解现在如何完成。
回答by Dilipkumar
Yes u can.
是的你可以。
Try this its works
试试这个它的作品
<input type="text" class="pwd">
$('.pwd').click(function(){
$(this).get(0).type='password';
});
回答by Jimmy Sawczuk
This is a security measure that most major browsers employ to mitigate screen-reading and password theft (it's more important going the other way, from passwordto text).
这是大多数主要浏览器用来减轻屏幕阅读和密码盗窃的安全措施（从password到更重要的是相反text）。
I can't tell from your code what you're trying to do, but here's my guess: you want a textbox with the word Passwordin it as a hint, and when it gets focus, the user enters their password as a password field. To accomplish this, you can use two elements: an <input type="text">and an <input type="password">, the latter hidden initially. When the user focuses on the textbox, simply hide it, show the password field, and set the focus. It could get tricky toggling back and forth between them.
我无法从您的代码中看出您要做什么，但这是我的猜测：您想要一个带有单词的文本框Password作为提示，当它获得焦点时，用户输入他们的密码作为密码字段。为此，您可以使用两个元素： an<input type="text">和 an <input type="password">，后者最初隐藏。当用户关注文本框时，只需隐藏它，显示密码字段，并设置焦点。在它们之间来回切换可能会很棘手。
Update
更新
This is now way easier to accomplish in modern browsers. Simply use something like this (here's a jsFiddle):
这在现代浏览器中更容易实现。只需使用这样的东西（这是一个jsFiddle）：
<input type="password" placeholder="Password" />
回答by Tom
You can always use the pure js like:
您始终可以使用纯 js，例如：
document.getElementsByName("login_pass")[0].type="text";
回答by Jubair
You can't change the type attribute. you must create a new element and delete the old one like this:
您无法更改 type 属性。您必须创建一个新元素并像这样删除旧元素：
var originalBtn = $("#password_input");
var newBtn = originalBtn.clone();
newBtn.attr("type", "password");
newBtn.insertBefore(originalBtn);
originalBtn.remove();
newBtn.attr("id", "password_input");
回答by Steffomio
Simply create 2 sync Input fields. One as password and one as text. Then switch their visiblity via button. Don't forget to hide the text-input on start.
只需创建 2 个同步输入字段。一个作为密码，一个作为文本。然后通过按钮切换它们的可见性。不要忘记在开始时隐藏文本输入。
<input type="password" id="inp_passwd"/><input type="password" id="inp_passwd2"/>
<input id="btn_show_passwd" type="button" value="Show Password" />
Javascript:
Javascript：
// sync input fields
$('#inp_passwd').keyup(function(){
$('#inp_passwd2').val($(this).val());
});
// show clear password
$('#btn_show_passwd').mousedown(function(){
$('#inp_passwd').hide();
$('#inp_passwd2').show();
});
// hide clear password
$('#btn_show_passwd').mouseup(function(){
$('#inp_passwd').show();
$('#inp_passwd2').hide();
});
// hide hidden text-field on start
$('#btn_show_passwd').mouseup();
you can use setTimeout as well instead of mouseup
您也可以使用 setTimeout 而不是 mouseup
回答by Hussein
This will do it
这将做到
$('<input type="password" id="password_input" name="password" />').insertAfter('#password_input').prev().remove();
Check working example at http://jsfiddle.net/RyVU8/
在http://jsfiddle.net/RyVU8/检查工作示例
UPDATE
更新
If you want to show plain text in a password field and then make it a regular password field on focus you can do the following
如果您想在密码字段中显示纯文本，然后使其成为焦点的常规密码字段，您可以执行以下操作
$('#clear').focus(function() {
$('#clear').hide();
$('#password_input').show().focus();
});
$('#password_input').blur(function() {
if ($('#password_input').val() == '') {
$('#clear, #password_input').toggle();
}
});
where #clearrepresents a text field that shows instead of the password field when it's in blur and user hasn't entered any password yet.
where#clear表示一个文本字段，当它模糊且用户尚未输入任何密码时，它会显示而不是密码字段。
check working example at http://jsfiddle.net/uNGKb/3/
在http://jsfiddle.net/uNGKb/3/检查工作示例
回答by Finto K Simon
<span>Password:</span>
<input type="text" id="pwd" style="width: 180px; color: Gray;" onfocus="Changetxt();this.type='password'" onblur="if(this.value==''){this.type='text';textboxtype();}" value="Enter Your Password Here" />
<script>
function Changetxt() {
if ($('#pwd').val() == "Enter Your Password Here") {
$('#pwd').val('');
$('#pwd').css('color', 'black');
}
}
function textboxtype() {
if ($('#pwd').val().length < 1) {
$('#pwd').val('Enter Your Password Here');
$('#pwd').css('color', 'gray');
}
}
</script>
回答by Mark Mckelvie
Have you tried using .prop?
你试过使用 .prop 吗？
$("#password_input").prop('type','password');
回答by Rene
All solutions here didnt work for me (Chrome Version 51.0.2704.103 m (64-bit)). Did it like this and it works:
这里的所有解决方案都不适用于我（Chrome 版本 51.0.2704.103 m（64 位））。是不是这样，它的工作原理：
jQuery(function() {
setTimeout(function(){
jQuery('.pwForm').attr('type','password');
}, 1);
});
Works on IE 11, too!
也适用于 IE 11！
Wait for DOM ready and wait 1 millisecond. Then Change type=text to type=password
等待 DOM 准备好并等待 1 毫秒。然后将 type=text 更改为 type=password
