change input type in ie

[dpatz]

Hi,
I have an input text box that I want to change the type from text to password and I wrote code that works in Firefox but not in IE any suggestions? Here is the code(cut down a little for easier reading):

<form class="formstyle">
[INDENT]<input name="password" type="text" value="Enter Password" onblur="if(this.value == '') {this.value = 'Enter Password'; this.type='text';}" onfocus="if(this.value == 'Enter Password') {this.value = ''; this.type='password';}"/>[/INDENT]
</form>

Thanks!

[Airshow]

Dpatz,

Looked around and the consensus seems to be that IE won't play ball with dynamically changing an INPUT field's type.

The standard(?) solution appears to be to swap out a faux (text) field for the real (password) field, somthing like this:

[B]Javascript[/B]
<script type="text/javascript">
function onFocusHandler_p(fld){
	fld.style.display = 'none';
	var fld2 = (document.getElementById) ? document.getElementById('password') : document.all['password'];
	fld2.style.display = 'block';
	fld2.focus();
	return true;
}
function onBlurHandler_p(fld){
	if(fld.value === ''){
		fld.style.display = 'none';
		var fld2 = (document.getElementById) ? document.getElementById('fauxPassword') : document.all['fauxPassword'];
		fld2.style.display = 'block';
	}
	return true;
}
</script>

[B]HTML[/B] (exploded for clarity)
<form class="formstyle">
<input 
	id="fauxPassword"
	name="fauxPassword"
	type="text"
	value="Enter Password"
	onfocus="onFocusHandler_p(this);"
/><input 
	id="password"
	style="display:none;"
	name="password"
	type="password"
	value=""
	onblur="onBlurHandler_p(this);"
/>
</form>

Probably best to keep the two INPUTs firmly abutted (or absolutely position them to occupy exactly the same position).

Tested in IE6 and Firefox 3.0.10 .

Airshow

[dpatz]

Thanks I ended up searching a little harder and found the same thing. Thanks a lot!