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:

[CODE=html]
<form>
<input type=TEXT id="some_id">
</form>
[/CODE]

[CODE=javascript]
input = document.getEle mentByID('some_ id');
alert(input.typ e);
input.setAttrib ute('type','pas sword');
[/CODE]

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.x psp_sp2_rtm.040 803-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.


[CODE=javascript]var input=document. getElementById( some-id);
var input2= input.cloneNode (false);
input2.type='pa ssword';
input.parentNod e.replaceChild( input2,input);[/CODE]

[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

[CODE=javascript]var input=document. getElementById( some-id);
var input2= input.cloneNode (false);
input2.type='pa ssword';
input.parentNod e.replaceChild( input2,input);[/CODE]

[epots9]

try this:
[code=javascript]
var input = document.getEle mentByID("id");
input.type = "password"
[/code]

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:
[code=javascript]
var input = document.getEle mentByID("id");
input.type = "password"
[/code]

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

[CODE=javascript]
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.parentNod e.replaceChild( input2,input);
}
catch(e)
{
window.status = e.message;
}
}
[/CODE]

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

[CODE=javascript]
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;
}
}
[/CODE]

[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.create Element():
[code=javascript]
document.create Element('<input type="password" ... />');
[/code]

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,[B]type[/B]){
    try {
        var input2 = input.cloneNode(false);
        switch([B]type[/B]){
            default:
            case 'text': {
                input2.[B]type [/B] = '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...

[CODE=asp]Function fncShowPass()
Dim oElement, oNewElement, strType
Set oElement = document.getEle mentByID("passw ordfield")
'I am using a checkbox to hide/show the password
If document.boxhid den.checked then
strType = "text"
else
strType = "password"
end if
Set oNewElement = document.create Element("<input disabled id=passwordfiel d type=" & strType &_
" value=" & oElement.value & " />")
call oElement.replac eNode(oNewEleme nt)
End Function[/CODE]

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

[CODE=vb]Function fncShowPass()
Dim oElement, oNewElement, strType
Set oElement = document.getEle mentByID("passw ordfield")
'I am using a checkbox to hide/show the password
If document.boxhid den.checked then
strType = "text"
else
strType = "password"
end if
Set oNewElement = document.create Element("<input disabled id=passwordfiel d type=" & strType &_
" value=" & oElement.value & " />")
call oElement.replac eNode(oNewEleme nt)
End Function[/CODE]

Converting this to Javascript would be relatively easy, but instead of using the full HTML with document.create Element (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:[code=html]
<form>
<input type="text" id="passwordtex t" value="Password " onclick="switch to(1)" onkeydown="swit chto(1)">
<input type="password" id="password" value="" onblur="if (this.value=='' )switchto(0)" style="display: none">
</form>[/code]

the JS:[code=javascript]
function switchto(q){
if (q){
document.getEle mentById('passw ordtext').style .display="none" ;
document.getEle mentById('passw ord').style.dis play="inline";
document.getEle mentById('passw ord').focus();
} else {
document.getEle mentById('passw ord').style.dis play="none";
document.getEle mentById('passw ordtext').style .display="inlin e";
}
}[/code]

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

[pbmods]

Heya, Paputza. Welcome to TSDN!

Please use CODE tags when posting source code:

&#91;CODE=javas cript]
JavaScript code goes here.
&#91;/CODE]