Question

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

<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上不会更改字段类型。

Answer 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/

Answer 2

之前我试过了。在IE中无法做到这一点。这是安全的事情。但您仍然可以在IE中设置value password的{{1}}。因此，您可以移除input text并将其替换为input password，然后设置新input的{{1}}。

value

<强> JSFIDDLE

Answer 3

而不是：

foo.type = 'password';

尝试：

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

更多信息：http://www.javascriptkit.com/dhtmltutors/domattribute.shtml

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

Answer 5

然而应该工作的丑陋（我没有IE8方便测试它）会将你的字段放在div中，并在需要时用container.innerHTML = "<input ...>"替换整个事物。

Answer 6

试试这个

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

Answer 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)')
    }
})

Javascript更改输入类型动态无法在IE8上运行

7 个答案: