Changing the type in IE with JavaScript

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();

Answer

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

Advertisement

Answer