NYCPHP Meetup

Wed Jun 6 22:03:14 EDT 2007

Ben Sgro (ProjectSkyline) wrote:
> Hello,
>  
> Yeah, I just hacked up this:
>  
> . "<input type=\"text\" value=\"Username\" onfocus=\"this.value=''\">"
>                        . "<input type=\"text\" value=\"Password\" 
> onfocus=\"this.value=''\" onfocus=\"this.type='password'\">"
>  
> What im trying to do is turn that type to a password..so I can see the 
> text...is that possible.
>  
> - Ben
>  
>
I'm not clear on whether you actually want the typed passwords to be 
visible as plaintext or hidden as asterisk/dots.
Regardless, below is a css+javascript solution which hides the password 
field underneath until you mouseover. I feel so filthy for doing it like 
this, but there are times when painting over the page with CSS is the 
only way to accomplish the objective. One of my clients has a cafe press 
store and they didn't want the cafepress logo to be visible on the page. 
Cafe press doesn't let you disable the logo, but with little bit of 
dirty css ... voila!

http://www.cafepress.com/doyourememberus/2478464

The logo is gone. In reality it's hidden behind the blue circle at the 
top left.

And now for the example:

<html>
<head>
<style type="text/css">
#TOP {
    position: absolute;
    left:300px;
    top:10px;
    width:100px;
    height:30px;
    z-index:1;
}
#BOTTOM {
    position: absolute;
    left:300px;
    top:10px;
    width:100px;
    height:30px;
    z-index:0;
}
</style>
</head>
<body>
<div id="TOP"><input type="text" name="junk" value="Password:" size=20 
onMouseover="document.getElementById('TOP').style.visibility='hidden';"></div>
<div id="BOTTOM"><input type="password" value="" size=20></div>
</body>
</html>

~Rolan

NYCPHP Meetup

NYPHP.org

[nycphp-talk] Removing Text from an Input Box