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

IT技术 javascript html internet-explorer
2021-03-08 20:44:31

下面的代码适用于所有网络浏览器，除了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();
4个回答

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

这是一个小提琴，代码如下：

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;
}
惊人的答案，伟大的心理计划，兄弟。我同意@JrChen，这个答案应该有几百个赞。我添加了这个，所以你可以用“显示/隐藏密码”复选框切换： if(oldHtml.indexOf("\"password\"")>-1) { newHtml=oldHtml.replace("\"password\" “，“\“文本\””）; } else { newHtml=oldHtml.replace("\"text\"","\"password\""); 谢谢，辣椒坚果。
2021-04-17 20:44:31
IE9 及以上将让您直接更改类型属性。
2021-05-01 20:44:31
这甚至在 IE 8 中也有效。为什么这个答案得到的赞成票如此之少？
2021-05-01 20:44:31

您不能在 Internet Explorer 中动态更改输入元素的类型。

一种可能的解决方法是：

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

您可能需要查看以下文章以了解上述内容的 JavaScript 植入：

另一种选择是静态创建两个元素，但一次只有一个可见。可见性和焦点将取决于元素的value。在这种情况下，您可能需要使用以下内容：

<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" />
适用于 IE9 及以上。
2021-04-27 20:44:31
dang 那是我以前的，我被告知这是错误的 =[ grr =[
2021-05-10 20:44:31

第三个选项是更改类名而不是值，然后只更改焦点上的 bg 图像，而不是类型。

您可以使用以下代码<input>在 IE 中使用 JavaScript更改类型：

<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=5" />

<script>

//this function will toggle the input between being a password or a text input
function transform(srcc,status) {


    //copy the element itself, its html source, and value text to a variable
    var myInput = document.getElementById(srcc.id);
    var oldHtml = myInput.outerHTML;
    var text = myInput.value;
    if (status=="click")
    {
        //replace "password" with "text" in the html if it is a password field
        var newHtml = oldHtml.replace(/password/g, "text");

    //update the html
    myInput.outerHTML = newHtml;
    //restore the text value
    myInput = document.getElementById(srcc.id);
    myInput.value = text;   
    document.getElementById(srcc.id).focus();
    }
    else
    {
        //replace "text" with "password" if it is a text field      
var newHtml = '<input id='+srcc.id+' type="password" value="cc" onclick="transform(this,\'click\');"  onblur="transform(this,\'blur\');" onmouseout="transform(this,\'mouseout\');">';


    //update the html
    myInput.outerHTML = newHtml;
    //restore the text value
    myInput = document.getElementById(srcc.id);
    myInput.value = text;
    }

}
</script>
</head>

<body>
 <input id="myinput" type="password" value="cc" onclick="transform(this,'click');"  onblur="transform(this,'blur');" onmouseout="transform(this,'mouseout');">
</body>

</html>
你能解释一下这个片段的作用吗？
2021-05-02 20:44:31
其它你可能感兴趣的问题
上一篇JavaScript 函数绑定（this 关键字）在赋值后丢失 下一篇触发点击的fancybox错误