form input type="text" has value onload, clear onc

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

form input type="text" has value onload, clear onc

Post by Chris Corbyn »

Does anyone know the little snippet code which allows you to put a value in the form text box and password box onload but when a user clicks in the box the text disappears?

Thanks
magicrobotmonkey
Forum Regular
Posts: 888
Joined: Sun Mar 21, 2004 1:09 pm
Location: Cambridge, MA

Post by magicrobotmonkey »

Code: Select all

onClick=formName.inputName.value = "";
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Ermm, that doesn't seem to work.

So I swap the bits that say "formname" and "inputname" to the names of those fields in my form?
magicrobotmonkey
Forum Regular
Posts: 888
Joined: Sun Mar 21, 2004 1:09 pm
Location: Cambridge, MA

Post by magicrobotmonkey »

yesh, that is correct
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Sorry, just me being stupid. It's working well now. Thanks
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Oh and do you know how you can make a password box say the word password onload?

Not just display those little masking asteriks?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

a box of type password can only display those marks.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Can make it dynamically change type from "text" to password onclick. I tried doing it with that little bit of code formname.inputname.value=""; changing to formname.inputname.type="password";

But it didn't do anything
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I don't think that's allowed.
If you really want to place normal text in there, you can position a piece of text over it, when clicked make it hidden...
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

alternately, you could dynamically change it's css background-image attribute maybe, if you are requiring newer browsers.. but you'll need to be careful, netscape and ie display background-image very differently..

best option is just having that text written nearby those fields.
Last edited by feyd on Tue Apr 20, 2004 7:14 pm, edited 1 time in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Hmmm, I guess I'll just leave it masked. Starts getting scrappy when you need to do things like that.

Thanks! :-)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

alternately, you could dynamically change it's css background-image attribute maybe, if you are requiring newer browsers.. but you'll need to be careful, netscape and ie display background-image very differently..
You can do that with css?

Interesting. Maybe I'll try that then.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

"type" is a read-only attribute in javascript, that's why you can't change it through script. the background-image idea would work, but then you have to have an image of the passwords. that sounds like ick.

I have the following functions that swap out one field for another in the same position.

function swapThem(trigger,source,replacement)
{
hide(source);
show(replacement);
}


function show(elm)
{
if (document.getElementById && document.getElementById(elm) != null)
{
document.getElementById(elm).style.display='block';
}
}

function hide(elm)
{
if (document.getElementById && document.getElementById(elm) != null)
{
document.getElementById(elm).style.display='none';
}
}

Just have the two fields next to each other. You could trigger it like:

<input type="text" id="password_txt" onclick="swapThem(this,'password');" />
<input type="password" id="password" />
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

feyd, the onClick idea you gave me works even better if you use onFocus instead of onClick since in explorer using the "tab" key to navigate through the form does not clear the value if onClick is used. Thanks for letting me know what the code was to change the value :-)

Unipus, it's ok about using your swapping idea. I'm just gonna keep it as a password box with masked characters in it. Thanks anyway. The code may come useful somewhere else some time. :-)
Post Reply