Changing Input Type

Printable View

Oct 24, 2003, 10:45
Markdidj

Changing Input Type

I'm trying to change an input type onevent, but not having any luck. Is it possible?

Is can get the type by using

Code:

<p> <input id="password" name="Password" type="text" value="Password" onclick="alert(this.type)"></input> </p>

but I can't seem to change the type from here.
As an alternative I was thinking of using

Code:

<p> <input id="password" name="Password" type="text" value="Password" onclick="this.parentElement.innerHTML='<input type=password value=password></input>'"></input> </p>

Any suggestions? It's only so I can have "password" written in the input, which changes to ••••••••
when clicked.
Oct 24, 2003, 10:57
ChaCha

Code:

<input type="password" id="p" name="p" value="" onclick="this.type = 'text';" onblur="this.type='password';"/>

seems to work in firebird. Another way would be on the onblur event to store the user's input into a textfield in a jscript variable and replace the text in the form with bullets. When the user clicks on the textfield you would replace the bullets with the contents of the variable. Make sure on the onsubmit event you place the value of the jscript variable into a hidden field and that the submit method is post.
Oct 24, 2003, 11:08
Markdidj

Thanks ChaCha. With IE I get

Quote:

could not get the type property. This command is not supported

Cheers for the other idea, more old browser compliant than changing innerHTML

The this.type= works in Opera and NS too, Think I'll use that as default, with if(ie) changeinnerHTML()
Oct 24, 2003, 11:17
ChaCha

This works fine...

Code:

<form name="f" id="f"> <input type="text" id="t" name="t" value="" onfocus="this.value = this.form.h.value;" onblur="this.form.h.value=this.value; this.value='********';"/> <input type="hidden" name="h" id="h" value="" /> </form>
Oct 24, 2003, 11:41
adios

Dug this out of the archives...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>untitled</title> <script type="text/javascript" language="javascript"> function toPassword(oInput) { var newEl = document.createElement('input'); newEl.setAttribute('type', 'password'); newEl.setAttribute('name', 'password'); oInput.parentNode.replaceChild(newEl,oInput); toPassword.el = newEl; setTimeout('toPassword.el.focus()',100); return true; } </script> </head> <body> <input type="text" name="username" value="Enter your Username" onfocus="if(this.value==this.defaultValue)this.value=''"> <input type="text" name="password" value="Enter your Password" onfocus="if(this.value==this.defaultValue)return toPassword(this)"> </body> </html>
Oct 24, 2003, 11:52
adios

Check "Remarks" here:

http://msdn.microsoft.com/workshop/a...ies/type_7.asp
Oct 24, 2003, 12:00
Markdidj

Cheers Adios.....works on all........