Dynamically change input type TEXT to PASSWORD

[kryo]

Hey Ya'll,

I encountered another issue, with lovely internet explorer... How it likes
to truly **** me off.. :X

Anywho, i'm trying to do this:

<form>
<input type=TEXT id="some_id">
</form>
 

input = document.getElementByID('some_id');
alert(input.type);
input.setAttribute('type','password');
 

This works fine, in Mozilla Firefox, but in internet explorer, it complains:
"This command is not supported."

err. Seems so final.. Is there a hack around this? anybody encountered this b4?

Thanks in advance :D

[kryo]

... btw, version of Internet Explorer is: 6.0.2900.2180.xpsp_sp2_rtm.040803-2158..

p.s. Isn't that version number just ridiculously long?

[mrhoo]

Yeah, in IE (through 7) you can't change the type of an input element after it has been added to the document.
You'll have to replace it with a new input element, with its type (and other attributes) already set before being appended.

If you clone the original you can preserve the text value, id and other attributes,
but you MAY need to reset some event handlers.

var input=document.getElementById(some-id);
var input2= input.cloneNode(false);
input2.type='password';
input.parentNode.replaceChild(input2,input);

[kryo]

Very cool man.. thanks.. I was unaware of the cloneNode and
replaceChild functions.. they will come in handy with some other things
i'm working on.. I'll test this code once i get back to my 'coding lair' :p

Thanks again

var input=document.getElementById(some-id);
var input2= input.cloneNode(false);
input2.type='password';
input.parentNode.replaceChild(input2,input);

[epots9]

try this:

var input = document.getElementByID("id");
input.type = "password"
 

i've used that in ie7 and firefox2, works good.

good luck

[kryo]

Thanks for your post, but unfortunately i'm testing for backwards capability from IE 6+ in IE 6, Msft didnt have that capability... i'm just now testing the above posted solution.. will report my final results, to share :D

try this:

var input = document.getElementByID("id");
input.type = "password"
 

i've used that in ie7 and firefox2, works good.

good luck

[kryo]

I regret to report that neither of the above solutions work in internet explorer 6... I constantly get the error:

"Could not get the type property. This command is not supported"

The below code seems to work correctly in Firefox 2.0.
However, in Intenet Explorer, it pukes.. Sometimes, it works
the first time w/o puking.. but the 2nd time it will puke for sure..
I'm still trying to come up with some kind of explanation for that.. :D

function user_set_input_type(input,type)
{
    try
    {
        var input2 = input.cloneNode(false);
        switch(type)
        {
            default:
            case 'text':
            {
                input2.type = 'text';
                break;
            }
            case 'password':
            {
                input2.type = 'password';
                break;
            }
        }
        input2.id = limput;
        input.parentNode.replaceChild(input2,input);
    }
    catch(e)
    {
        window.status = e.message;
    }
}
 

This code, constantly pukes in I.E 6.0 but still works correctly in FireFox... My guess is that Mozilla allows the type property (which should be read only) to be modified post-runtime.. In this case, i'm glad they do this.. re-creation of the text element would not be optimal in my case. However, I still need to find a solution for I.E. 6... Any help would be greatly appreciated..

function user_set_input_type(input,type)
{
 
    try
    {
        switch(type)
        {
            default:
            case 'text':
            {
                input.type = 'text';
                break;
            }
            case 'password':
            {
                input.type = 'password';
                break;
            }
        }
    }
    catch(e)
    {
        window.status = e.message;
    }
}
 

[acoder]

Does it work on IE7?

[pbmods]

You may need to use the 'create/replace' method, but generate the input by passing HTML as the parameter to document.createElement():

document.createElement('<input type="password" ... />');
 

I think that's how you do it in IE. And it should be noted that this ONLY works in IE. If it works.

Not that I have regrets. It's all bright and sunny over here in Mac Land :)

[acoder]

Remove "default:" from line 8. How are you calling this function?

[mrhoo]

function user_set_input_type(input,type){
    try {
        var input2 = input.cloneNode(false);
        switch(type){
            default:
            case 'text': {
                input2.type  = 'text';

The local variable type is overriding the property name 'type' here

[flash13]

I wanted to post a reply here because I found this thread as a result of searching to find an answer to the same problem. This thread pointed me in the direction I finally went in and this worked (I'm writing an HTA so if it works there it should work in IE.) Also note I'm using the wonderfully inflexible VBScript to get this one to work. Javascript should be similar or even easier...

Function fncShowPass()
   Dim oElement, oNewElement, strType
   Set oElement = document.getElementByID("passwordfield")
   'I am using a checkbox to hide/show the password
   If document.boxhidden.checked then
      strType = "text"
   else
      strType = "password"
   end if
   Set oNewElement = document.createElement("<input disabled id=passwordfield type=" & strType &_
      " value=" & oElement.value & " />")
   call oElement.replaceNode(oNewElement)
End Function

[acoder]

Welcome to TSDN!

Thanks for posting your solution.

Also note I'm using the wonderfully inflexible VBScript to get this one to work. Javascript should be similar or even easier...

Function fncShowPass()
   Dim oElement, oNewElement, strType
   Set oElement = document.getElementByID("passwordfield")
   'I am using a checkbox to hide/show the password
   If document.boxhidden.checked then
      strType = "text"
   else
      strType = "password"
   end if
   Set oNewElement = document.createElement("<input disabled id=passwordfield type=" & strType &_
      " value=" & oElement.value & " />")
   call oElement.replaceNode(oNewElement)
End Function

Converting this to Javascript would be relatively easy, but instead of using the full HTML with document.createElement (which is incorrect syntax), the cloneNode/replaceChild method should work.

[paputza]

I think it's better to use a safe solution for this, having 2 inputs, one text and one password and switch the "display" property for them.
the HTML:

<form>
<input type="text" id="passwordtext" value="Password" onclick="switchto(1)" onkeydown="switchto(1)">
<input type="password" id="password" value="" onblur="if (this.value=='')switchto(0)" style="display:none">
</form>

the JS:

function switchto(q){
    if (q){
        document.getElementById('passwordtext').style.display="none";
        document.getElementById('password').style.display="inline";
        document.getElementById('password').focus();
    } else {
        document.getElementById('password').style.display="none";
        document.getElementById('passwordtext').style.display="inline";
    }
}

// the code can be optimized, but you get my point

[pbmods]

Heya, Paputza. Welcome to TSDN!

Please use CODE tags when posting source code:

[CODE=javascript]
JavaScript code goes here.
[/CODE]

[rehanift]

I had this same problem, here is how I got around it (Mine is written in prototype so here is the pseudo-code):

1 text input (id:"password_fake", default value:"Password")
1 password input ("password")

NOTE: elements must be of the same exact style and sequential in the DOM.

Event listener for "password_fake":
Onfocus
- hide "password_fake"
- show "password"
- focus on "password"

Event listener for "password"
Onblur
- if "password".value.length == 0 then:
- hide "password"
- show "password_fake"

works on FF, IE7,IE6

[loudstil]

Hi all, I got the same issue with IE8 , I took the code that Flash13 published and I modified it :

function RepType(){
    var input = document.getElementById(ElementID'); 
    var input2 = document.createElement('sTag);
    with (input2){
        id = input.id;
        value = input.value;
        type = 'password';
    }
    input.parentNode.replaceChild(input2,input);         
}
 

Work like a charme

[gits]

just a note: it is not recommended to use the with-statement have a look here and here ...

kind regards

[Nancy Madrid]

This is my way...

<input id="paypal_cc_number" name="paypal_cc_number[]" type="hidden">
<input id="texto_paypal_cc_number" onblur="enmascarar()" onfocus="desenmascarar()"  style="display:block">

<script>
function enmascarar() 
{
    document.getElementById("paypal_cc_number").value = document.getElementById("texto_paypal_cc_number").value;
    if(document.getElementById("texto_paypal_cc_number").value!="")
        document.getElementById("texto_paypal_cc_number").value = "**************";
 }
 
function desenmascarar() 
{
    document.getElementById("texto_paypal_cc_number").value = document.getElementById("paypal_cc_number").value;
}
 

and it works in IE 6 and 7 and chrome and firefox!!!

enjoy it!

[Kamran Sohail]

I am agreed with "paputza" I have used two type of fields text and password. password status is none but when you clicks on text field i display password control and hide text control. If we go for other solution we will keep on facing cross browsers issues :)