发表新帖
发表新帖

Changing the <input> type in IE with JavaScript

前端 未结
关注
4 1897
旧巷少年郎
旧巷少年郎 2020-11-28 15:15

This code below works in all web browsers except IE:
相关标签:
4条回答
  • 轮回少年
    2020-11-28 15:40

    You can use the code below to change the <input> type in IE with 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>
    0 讨论(0)
  • 情书的邮戳
    2020-11-28 15:50

    you can do this. However, doing a replace on the outerhtml essentially re-declares the element, so any attribute not explicitly defined in the tag declaration will be forgotten. That is why the text value is saved to a variable first. Unlike jQuery's attr and prop, this works in all versions of IE. I used a real IE10, and I used IETester for 5.5 thru 9.

    Here is a fiddle, code below:

    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;
}
    0 讨论(0)
  • 轻奢々
    2020-11-28 15:50

    Third option is to change a class name instead of a value, and then just change the bg image on focus, instead of type.

    0 讨论(0)
  • 执念已碎
    2020-11-28 15:51

    You cannot dynamically change a the type of an input element in Internet Explorer.

    One possible workaround would be to:

    • Dynamically create a new element.
    • Copy the properties of the old element into the new element.
    • Set the type of the new element to the new type.
    • Then replace the old element with the new element.

    You may want to check the following article for a JavaScript implantation of the above:

    • Change Input Element Type using JavaScript

    Another option would be to statically create the two elements, but having only one visible at a time. The visibility and the focus would depend on the value of the elements. In this case, you may want to use something like this:

    <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" />
    0 讨论(0)
 看不清?
提交回复
热议问题