javascript 以编程方式将文本框类型从 type='text' 更改为 type='password'
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5878636/
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
programatically change textbox type from type='text' to type='password'
提问by Dkong
i have username and password textboxes. i want them to both show the default text, ie "username" and "password", but when the user clicks on the password box it should dynamically change to a "password" type for security reasons.
我有用户名和密码文本框。我希望它们都显示默认文本，即“用户名”和“密码”，但是当用户单击密码框时，出于安全原因，它应该动态更改为“密码”类型。
i've managed to do this easily enough with javascript code but it doesn't want to work in IE.
我已经设法用 javascript 代码很容易地做到这一点，但它不想在 IE 中工作。
<input id="username" class="username" name="u" type="text" value="username" onclick="if(this.value='username') {this.value=''};" />
<input id="password" class="password" name="p" type="text" value="password" onclick="if(this.value='password') {this.value=''; this.type='password'};" />
回答by Jayantha Lal Sirisena
Let say your html code is like this
假设您的 html 代码是这样的
<input type="text" id="txtId" />
you can replace it by using Jquery,
您可以使用 Jquery 替换它，
$('#txtId').replaceWith('<input type="password" id="txtId" />')
回答by cHao
IE only lets you set the type of an inputelement once, when the element is created. Attempts to set it after that will fail.
IE 只允许您在input创建元素时设置元素的类型一次。之后尝试设置它会失败。
If you want to "change" the element in IE, what you'll likely need to do is create another element with the same attributes (except for the type, of course), and replace the existing element with it.
如果您想在 IE 中“更改”元素，您可能需要做的是创建另一个具有相同属性的元素（当然，类型除外），并用它替换现有元素。
Or create a dummy textbox for the password, and have the real password box hidden -- on focus the dummy box should hide itself, and show and focus on the real password box.
或者为密码创建一个虚拟文本框，并隐藏真正的密码框——在焦点上，虚拟框应该隐藏自己，并显示并聚焦在真实的密码框上。
回答by Marty
Would you consider using JQuery?
你会考虑使用 JQuery 吗？
$("[name=fieldname]").attr("type", "password");
回答by Mathieu Rodic
Here is a function to replace any form element by a password with the same value, knowing its id:
这是一个用具有相同值的密码替换任何表单元素的函数，知道它的 id：
function replaceWithPassword(id)
{
var o = $('input#' + id + ', textarea#'+id + ', select#'+id);
o.replaceWith('<input type="password" value="' + o.val() + '" id="' + id + '" />');
}
回答by Millicent Achieng'
This worked for me Put this in the head section
这对我有用 把它放在头部部分
function changeBack()
{
if(document.getElementById('smsl_pw').value=='')
{
document.getElementById('smsl_pw').type='text';
document.getElementById('smsl_pw').value='Password';
}
}
function changePass()
{
document.getElementById('smsl_pw').type='password';
document.getElementById('smsl_pw').value='';
}
Here is the input field
<input id="smsl_pw" onclick="changePass();" onblur="changeBack();" name="smsl_pw" type="text" value="Password">
这是输入字段
<input id="smsl_pw" onclick="changePass();" onblur="changeBack();" name="smsl_pw" type="text" value="Password">
Hope it helps someone
希望它可以帮助某人
