IE problem with javascript

Question

i have the following simple script

<input class="input"  type="text" name="password" style="color: #797272;" 
       value= "<?php if ($_POST[password] != '') {echo '';}
         else {echo 'Ծածկաբառ';}?>"   
        onclick="if (this.value === this.defaultValue) {
                   this.value='';
                   this.style.color='black';
                   this.type='password';
                   }" 

      />

it works fine, but in IE7 it doesn't change the input type.

this.type='password'; doesn't work

could you help me? thanks

update

and what can i do, if i want to show default value in thet input?

Answer 1

Sadly IE doesn't allow input tag to change to or from password type. Very annoying. 'They' say it is for security reasons, but every other browser allows it...

Answer 2

You simply can't do this in IE, it doesn't allow you to change the type once it's been added to the DOM. To do this, you have to replace the input completely.

From the documentation:

As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.

Answer 3

If it is in IE 6, it seems that you cannot change the type... you can however replace the entire element:

http://bytes.com/topic/javascript/answers/705445-dynamically-change-input-type-text-password

Answer 4

You can't change the type of inputs with JS in Internet Explorer, and the approach you are taking has other implications (such as accessibility problems).

Taking a different approach and having a positioned label element avoids the problem of changing the field and reduces the accessibility issues greatly. I wrote an example: http://dorward.me.uk/tmp/label-work/example.html

Answer 5

the only one solution i found, it works fine

function change() 
    {
        var input=document.getElementById('some');
        var input2= input.cloneNode(false);
        input2.type='password';
        input.parentNode.replaceChild(input2,input);
    }