change input type

jonnekke · #1 (**permalink**) 06-25-09, 03:08 AM

I wrote a little piece of javascript that should change the appearance of an input field:

Code:

function alias_focus2()
{
	if(document.getElementById('sPassword').value == 'password')
	{
		document.getElementById('sWachtwoord').style.color = 'black';		
		document.getElementById('sWachtwoord').value = '';
		document.getElementById('sWachtwoord').type = 'password';
		
	}	
}

function alias_blur2()
{
	if(document.getElementById('sPassword').value == '')
	{
		document.getElementById('sWachtwoord').style.color = 'grey';		
		document.getElementById('sWachtwoord').value = 'password';
		document.getElementById('sWachtwoord').type = 'text';
	}	
}

and this is the HTML for that:

HTML Code:

<input name="sPassword" id="sPassword" type="text" class="zkn" value="password" onfocus="alias_focus2();"  onblur="alias_blur2();" style="color: grey; font-style:italic;" />

on FF and Safari it works.. but on IE it's not working well...
Where did I go wrong?

_j

job0107 · #2 (**permalink**) 06-25-09, 05:37 PM

Changing the type property in IE is forbidden.
You must use two input elements to perform the trick you want.

Example:

PHP Code:


			
<?php
$pass = empty($_POST["sPassword"]) ? "" : $_POST["sPassword"];
$wach = empty($_POST["sWachtwoord"]) ? "" : $_POST["sWachtwoord"];
echo "sPassword = " . $pass . "<br />sWachtwoord = " . $wach . "<br />";
?>
<html>
<head>
<script>
function display_password_element(obj,id)
{
 obj.style.display = "none";
 var obj1 = document.getElementById(id);
 obj1.style.display = "inline";
 obj1.focus();
 }
function display_text_element(obj,id)
{
 if(!obj.value)
 {
  obj.style.display = "none";
  document.getElementById(id).style.display = "inline";
  }
 }
</script>
</head>
<body>

<!-- Note: Input elements must be used in pairs. -->

<form action="#" method="POST">
<table>
 <tr>
  <td align="right">Enter Password: </td>
  <td>
   <!-- These two input elements are used for the first password. -->
   <input id="sPassword" type="text" class="zkn" value="password" onfocus="display_password_element(this,'sPassword1');" style="color:grey;font-style:italic;width:100px;" />
   <input name="sPassword" id="sPassword1" type="password" class="zkn" onblur="display_text_element(this,'sPassword');" style="display:none;width:100px;" />
  </td>
 </tr>
 <tr>
  <td align="right">Re-enter password: </td>
  <td>
   <!-- These two input elements are used for the second password. -->
   <input id="sWachtwoord" type="text" class="" onfocus="display_password_element(this,'sWachtwoord1');" style="color:grey;font-style:italic;width:100px;" value="password" />
   <input name="sWachtwoord" id="sWachtwoord1" type="password" class="" onblur="display_text_element(this,'sWachtwoord');" style="display:none;width:100px;" />
  </td>
 </tr>
 <tr>
  <td colspan="2" align="center">
   <br />
   <input type="submit" value="Submit" />
  </td>
 </tr>
</table>
</form>
</body>
</html>

jonnekke · #3 (**permalink**) 06-29-09, 03:07 AM

Great!

this is what i was looking for!!

_j