NYCPHP Meetup

NYPHP.org

[nycphp-talk] Removing Text from an Input Box

Ben Sgro (ProjectSkyline) ben at projectskyline.com
Wed Jun 6 22:10:06 EDT 2007


Hello Rolan,

Well, ideally, yes, but people can identify well enought with
a Textbox stating: Username and one beneath it stating: *******.

If they can't figure that out, they don't deserve accesss to the app.

= ]

Thanks for the code, I'll take a look. That's a neat little trick!

- Ben

Ben Sgro, Chief Engineer
ProjectSkyLine - Defining New Horizons

----- Original Message ----- 
From: "Rolan Yang" <rolan at omnistep.com>
To: "NYPHP Talk" <talk at lists.nyphp.org>
Sent: Wednesday, June 06, 2007 10:03 PM
Subject: Re: [nycphp-talk] Removing Text from an Input Box


> 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
> _______________________________________________
> New York PHP Community Talk Mailing List
> http://lists.nyphp.org/mailman/listinfo/talk
>
> NYPHPCon 2006 Presentations Online
> http://www.nyphpcon.com
>
> Show Your Participation in New York PHP
> http://www.nyphp.org/show_participation.php 




More information about the talk mailing list