使用JavaScript更改IE中的<input>类型

Question

以下代码适用于所有Web浏览器,除了IE:

<input type="text" name="passwordLogin" value="Password" onfocus="if(this.value=='Password'){this.value=''; this.type='password'};" onblur="if(this.value==''){this.value='Password'; this.type='text'};" size="25" />

如何为IE修复它？

我做了一些更改,但仍然有错误.

我希望它像这样工作:

<input type="text" name="usernameLogin" value="Email" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" size="25" />

如果我不输入任何东西,它会把价值放回去.

所以我尝试了这个:

<td colspan="2" id="passwordLoginTd">
     <input id="passwordLoginInput1" type="text" name="passwordLogin" value="Password" onfocus="passwordFocus()" size="25" />
     <input id="passwordLoginInput2" style="display: none;" type="password" name="passwordLogin" value="" onblur="passwordBlur()" size="25" />
    </td>
    <script type="text/javascript">
    //<![CDATA[

     passwordElement1 = document.getElementById('passwordLoginInput1');
     passwordElement2 = document.getElementById('passwordLoginInput2');

     function passwordFocus() {

      passwordElement1.style.display = "none";
      passwordElement2.style.display = "inline";
      passwordElement2.focus();

     }

     function passwordBlur() {

      if(passwordElement2.value=='') {

       passwordElement2.style.display = "none";
       passwordElement1.style.display = "inline";
       passwordElement1.focus();

      }

     }

    //]]>
    </script>

你可以看到模糊不起作用.

最后我明白了,我需要删除:

passwordElement1.focus();

Answer 1

你可以这样做.但是,对outerhtml进行替换实质上是重新声明了元素,因此将忘记在标记声明中未明确定义的任何属性.这就是文本值首先保存到变量的原因.与jQuery的attr和prop不同,这适用于所有版本的IE.我用了一个真正的IE10,我使用了IETester 5.5到9.

这是一个小提琴,代码如下:

HTML

<input id="myinput" type="password">
<input value="transform" id="transformButton" type="button">

JS

//attach a click handler to the button to make it transform 
//when clicked, via our transform() function below
document.getElementById('transformButton').addEventListener("click", transform);

//flag of whether or not it is a password field or text field
var isPassword = true;
//this function will toggle the input between being a password or a text input
function transform() {
    //copy the element itself, its html source, and value text to a variable
    var myInput = document.getElementById("myinput");
    var oldHtml = myInput.outerHTML;
    var text = myInput.value;
    if (isPassword)
    {
        //replace "password" with "text" in the html if it is a password field
        var newHtml = oldHtml.replace(/password/g, "text");
    }
    else
    {
        //replace "text" with "password" if it is a text field
        newHtml = oldHtml.replace(/text/g, "password");
    }
    //update the html
    myInput.outerHTML = newHtml;
    //restore the text value
    myInput = document.getElementById("myinput");
    myInput.value = text;
    //toggle the isPassword flag
    isPassword = !isPassword;
}

Answer 2

您无法在Internet Explorer中动态更改输入元素的类型.

一种可能的解决方法是:

• 动态创建一个新元素.
• 将旧元素的属性复制到新元素中.
• 将新元素的类型设置为新类型.
• 然后用新元素替换旧元素.

您可能需要查看以下文章以获取上述JavaScript植入:

• 使用JavaScript更改输入元素类型

另一个选择是静态创建两个元素,但一次只能看到一个元素.可见性和焦点将取决于元素的价值.在这种情况下,您可能希望使用以下内容:

<script type="text/javascript">   
  function checkType() {
     var thisElement = document.getElementById('field_text');
     var otherElement = document.getElementById('field_password');

     if (thisElement.value === 'Password') {            
        otherElement.style.display = 'inline';
        thisElement.style.display = 'none';
        otherElement.focus();
     }
  }
</script>

<input type="text" value="Password" id="field_text" onfocus="checkType();" />
<input type="password" value="" style="display: none;" id="field_password" />