Changing Input Type

**Markdidj** · Oct 24, 2003 10:45

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.

**ChaCha** · Oct 24, 2003 10:57

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.

**Markdidj** · Oct 24, 2003 11:08

Thanks ChaCha. With IE I get

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

**ChaCha** · Oct 24, 2003 11:17

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>

**adios** · Oct 24, 2003 11:41

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>

**adios** · Oct 24, 2003 11:52

Check "Remarks" here:

http://msdn.microsoft.com/workshop/a...ies/type_7.asp

**Markdidj** · Oct 24, 2003 12:00

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

User Tag List

Thread: Changing Input Type

Thread Tools

Display

Changing Input Type

Bookmarks

Bookmarks

Posting Permissions