change the type of a field from text to password

**sanoop** · 01-31-2007, 03:21 AM

Hi All,

I would like to change the type of a field from text to password in the onClick event.

Code:
function change_type() {
document.getElementById('Id_Field').type = 'password';
}

this code works in Mozilla and Firefox, but Internet Explorer giving error

pl give me some solution

Sanoop

**djr33** · 01-31-2007, 05:02 AM

Random guess:
*might* be that IE doesn't like 'getElementById'... I think there's another thing to use in IE. But I might just be wrong.

**sanoop** · 02-01-2007, 03:01 AM

document.testform.testfield.type = 'password';
also tried problem with type property

**jscheuer1** · 02-01-2007, 04:55 AM

I doesn't seem to matter how you access the text input (as a part of a form or as a document element or as part of the document.all collection), or whether you use the setAttribute() method or just assign the value directly. IE for some reason just doesn't like this. I found a work around that FF also will happily use:

Code:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function passit(ip){
var np=ip.cloneNode(true);
np.type='password';
ip.parentNode.replaceChild(np,ip);
}
</script>
</head>
<body>
Hi<br><button style="cursor:pointer;" onclick="passit(document.getElementById('test'));">Pword It</button>
<input id="test" type="text">
</body>
</html>

BTW, since IE 5, IE has been just fine with getElementById.

**jscheuer1** · 02-01-2007, 05:14 AM

Here's another demo with a tweak for browsers that won't clone the value (like Opera, possibly others) that also shows accessing the text input as a part of a form:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function passit(ip){
var np=ip.cloneNode(true);
np.type='password';
if(np.value!=ip.value)
np.value=ip.value;
ip.parentNode.replaceChild(np,ip);
}
</script>
</head>
<body>
<form action="#">
<input name="pw" id="test" type="text"><br>
<input type="button" style="cursor:pointer;" onclick="passit(this.form[0]);" value="Pword It">
<input type="submit" value="submit">
</form>
</body>
</html>

**mburt** · 02-01-2007, 11:12 AM

IE doesn't support the type attribute when accessed dynamically. I've encountered this problem before myself.

**jscheuer1** · 02-01-2007, 01:12 PM

Originally Posted by mburt

IE doesn't support the type attribute when accessed dynamically. I've encountered this problem before myself.

Well, that is obviously not universally true, or else my two little workaround demos wouldn't work in IE but, they do work in IE.

Also, IE can access it like so:

<input type="text" onclick="alert(this.type);">

**Twey** · 02-01-2007, 01:24 PM

I seem to remember something about setting it with setAttribute() for IE. Can't remember precisely, though.

**chechu** · 02-01-2007, 01:29 PM

And this ?

Code:

<script language="JavaScript" type="text/JavaScript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
</script>

<INPUT TYPE=TEXT NAME="name" VALUE="x" onFocus="clearDefault(this)" style="border:0px; width:148px">

**jscheuer1** · 02-01-2007, 01:58 PM

Originally Posted by Twey

I seem to remember something about setting it with setAttribute() for IE. Can't remember precisely, though.

That works with some things that cannot be accessed directly as attribute/value pairs but, as I said already in this thread, not for this.

Originally Posted by chechu

And this ?

Code:

<script language="JavaScript" type="text/JavaScript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
</script>

<INPUT TYPE=TEXT NAME="name" VALUE="x" onFocus="clearDefault(this)" style="border:0px; width:148px">

What does that have to do with changing the type attribute?

Thread: change the type of a field from text to password

Thread Tools

Search Thread

change the type of a field from text to password

Bookmarks

Bookmarks

Posting Permissions