Javascript 动态更改输入类型在 IE8 上不起作用答案

【问题标题】：Javascript change input type dynamically doesnt work on IE8Javascript 动态更改输入类型在 IE8 上不起作用
【发布时间】：2011-11-28 22:02:48
【问题描述】：

我有一个用于在网页中输入密码的输入字段：

<input name="txtPassword" type="text" class="input2" id="txtPassword" value="Password" onfocus="txtOnFocus2('txtPassword','Password');" onblur="txtOnBlur2('txtPassword','Password');" />

在初始状态下，用户应读取“密码”作为初始值，当他开始输入密码时，该字段应更改为输入密码。此外，当他将其设置回空白或初始值时，该字段应将类型更改为“文本”并显示密码。

我编写了代码并让它在 Firefox、Chrome 和 safari 上运行，并且它没有在 IE 8 上将类型更改为密码。

这是我通过编辑现有功能代码制作的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;
    }
 }

这在 Firefox、chrome 和 safari 中运行良好，但不会更改 IE 8 上的字段类型。

【问题讨论】：

标签： javascript html

【解决方案1】：

另一种解决方案是完全改变您的方法。以下技术可以优雅地降级，更易于访问，并且对 JavaScript 的依赖更少：

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

$('input')
    .focus(function() {
        $(this).css('background-color', 'white');
    })
    .blur(function() {
        if($.trim($(this).val()) == '') {
            $(this).css('background-color', 'transparent').val('');
        }
    });

CSS

input {
    background-color: transparent;
    padding: 2px;
}

label {
    color: gray;
    padding: 2px 4px;
    position: absolute;
    z-index: -1;
}

现场演示： http://jsfiddle.net/rjkf4/

【讨论】：

谢谢兄弟.. 但我的设计很复杂，而且有很多输入字段.. 并尝试是否可以专门为一个输入编写它..
@RobG 是的。无论有没有 JavaScript，这种技术都可以使用。在这种情况下，JS 只是通过更改背景颜色来增强技术，使输入更清晰。 In 对输入字段的功能没有影响。
@Ayman - 所以这将是“不依赖于javascript”。 :-) 你可以用 CSS 和属性值做一些这样的事情，但不幸的是保持属性和属性同步是一件痛苦的事情。
mithunsatheesh 您可以更改 $("input").部分代码来抓取不同的元素。例如。如果您将 data-hide-password="true" 属性添加到特定输入字段，则可以将 JavaScript 更改为 $("[data-hide-password]")。

【解决方案2】：

我以前试过。在 IE 中没有办法做到这一点。这是一个安全的事情。但是您仍然可以在 IE 中设置 password input 的 value。因此，您可以删除 text input 并用 password input 替换它，然后设置新的 value 的 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);
};

JSFIDDLE

【讨论】：

在这里为我工作，您正在试用什么浏览器？

【解决方案3】：

代替：

foo.type = 'password';

尝试：

foo.setAttribute('type', 'password');

【讨论】：

所以您可以这样做并让它在 IE
对不起，它没有解决问题..密码仍然没有改变类型。休息工作..

【解决方案4】：

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

【讨论】：

在 IE 8 + Firefox 中不起作用，即使我复制了 el.class= oEl.class 之类的类，它也会删除输入字段的样式；正如你提到的。
它适用于 IE 8，我测试过。您应该复制的属性是 className，而不是 class。

【解决方案5】：

一些丑陋但应该可以工作的东西（我没有方便的 IE8 来测试它）是将你的字段放在一个 div 中，并在需要时用 container.innerHTML = "<input ...>" 替换整个东西。

【讨论】：

【解决方案6】：

试试这个

http://www.electrictoolbox.com/jquery-toggle-between-password-text-field/

【讨论】：

【解决方案7】：

作为一种选择，您可以通过使用带有该文本的背景图像来伪造密码字段中的可见文本。

$(".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)')
    }
})

【讨论】：