Changing the <input> type in IE with JavaScript

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">

//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;
}

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

Changing the <input> type in IE with JavaScript

Related

Recent Posts