Changing the <input> type in IE with JavaScript

Issue

This code below works in all web browsers except 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" />

How can I fix it for IE?

I did some changes, but it still has an error.

I want it to work like this like here:

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

if I don't enter anything it will put the value back.

So I tried this:

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

as you can see the blur does not work.

Finally I got it, I needed to remove:

passwordElement1.focus();

Solution

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

Answered By - Daniel Vassallo