PDA

View Full Version : change the type of a field from text to password



sanoop
01-31-2007, 03:21 AM
:confused: 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:


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


<!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
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 ?

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


And this ?

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