Javascript 动态更改输入类型在 IE8 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7618306/
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
Javascript change input type dynamically doesnt work on IE8
提问by mithunsatheesh
i have a input field for entering password in a webpage:
我有一个用于在网页中输入密码的输入字段：
<input name="txtPassword" type="text" class="input2" id="txtPassword" value="Password" onfocus="txtOnFocus2('txtPassword','Password');" onblur="txtOnBlur2('txtPassword','Password');" />
in the initial state the usershould read "password" as the initial value and when he starts typing a password, the field should change to type password. Also when he sets it back to blank or initial value the field should change type to "text" and show password.
在初始状态下，用户应该读取“密码”作为初始值，当他开始输入密码时，该字段应更改为输入密码。此外，当他将其设置回空白或初始值时，该字段应将类型更改为“文本”并显示密码。
I wrote code an got it working on Firefox, Chrome, and safari and its not changing the type to password on IE 8.
我编写了代码并让它在 Firefox、Chrome 和 safari 上运行，并且它没有在 IE 8 上将类型更改为密码。
this is the js code i made by editing an existing function code:
这是我通过编辑现有函数代码制作的 js 代码：
function txtOnFocus2(elementId, defaultText)
{
if (document.getElementById(elementId).value == defaultText)
{
document.getElementById(elementId).value = "";
document.getElementById(elementId).type = "password";
}
}
function txtOnBlur2(elementId, defaultText)
{
var textValue = document.getElementById(elementId).value;
if (textValue == defaultText || textValue.length == 0)
{
document.getElementById(elementId).type = "text";
document.getElementById(elementId).value = defaultText;
}
}
This is working fine in Firefox,chrome and safari but doesn't change field type on IE 8.
这在 Firefox、chrome 和 safari 中工作正常，但不会更改 IE 8 上的字段类型。
回答by Ayman Safadi
An alternative solution would be to change your approach altogether. The following technique degrades gracefully, is more accessible, and less JavaScript-dependant:
另一种解决方案是完全改变你的方法。以下技术可以优雅地降级，更易于访问，并且对 JavaScript 的依赖性更低：
HTML
HTML
<div><label for="email">Email</label> <input type="text" name="email" id="email" /></div>
<div><label for="password">Password</label> <input type="password" name="password" id="password" /></div>
JavaScript
JavaScript
$('input')
.focus(function() {
$(this).css('background-color', 'white');
})
.blur(function() {
if($.trim($(this).val()) == '') {
$(this).css('background-color', 'transparent').val('');
}
});
CSS
CSS
input {
background-color: transparent;
padding: 2px;
}
label {
color: gray;
padding: 2px 4px;
position: absolute;
z-index: -1;
}
Live demo:http://jsfiddle.net/rjkf4/
现场演示：http : //jsfiddle.net/rjkf4/
回答by Mohsen
I tried that before. There is no way to do this in IE. This is an security thing. But still you can set the valueof a passwordinputin IE. So you can remove the textinputand replace it with a passwordinputand then set the valueof new input.
我以前试过。在 IE 中没有办法做到这一点。这是安全的事情。但是你仍然可以在 IE 中设置valueapasswordinput的。所以你可以删除textinput并用 a 替换它，passwordinput然后设置valuenew input。
function replaceInput(input){
var val = input.value,
passwordInput = document.createElement('input');
passwordInput.setAttribute('type', 'password');
passwordInput.value = val;
input.parentElement.appendChild(passwordInput);
input.parentElement.removeChild(input);
};
回答by Bala
回答by Ayman Safadi
Instead of:
代替：
foo.type = 'password';
try:
尝试：
foo.setAttribute('type', 'password');
More info: http://www.javascriptkit.com/dhtmltutors/domattribute.shtml
更多信息：http: //www.javascriptkit.com/dhtmltutors/domattribute.shtml
回答by RobG
In IE 6 and 7 (at least) you can't change the type of an input that's already in the document. You must create a new input, set its type, then replace the one that's in the document, e.g.
在 IE 6 和 7（至少）中，您无法更改文档中已有的输入类型。您必须创建一个新输入，设置其类型，然后替换文档中的输入，例如
var el = document.createElement('input');
el.type = 'password'
var oEl = document.getElementById(elementId);
el.id = oEl.id;
// and so on for other properties that should be copied
oEl.parentNode.replaceChild(el, oEl);
回答by 6502
Something ugly that however should work (I don't have IE8 handy to test it) would be placing your field in a div and replacing the whole thing with container.innerHTML = "<input ...>"when needed.
但是应该工作的丑陋的东西（我没有方便的 IE8 来测试它）会将您的字段放在一个 div 中，并container.innerHTML = "<input ...>"在需要时替换整个内容。
回答by 6502
As an option you could just fake having a visible text in the password field by using a background image with that text on it.
作为一种选择，您可以通过使用带有该文本的背景图像来伪造在密码字段中具有可见文本。
$(".password").focus(function(){
$(this).css("background-image", 'url(regular_bg.png)')
})
$(".password").blur(function(){
if ($(this).val() == ""){
$(this).css("background-image", 'url(bg_with_password_label_on_it.png)')
}
})
