Page 1 of 1

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

Posted: Tue Apr 20, 2004 6:26 pm
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

Posted: Tue Apr 20, 2004 6:28 pm
by magicrobotmonkey

Code: Select all

onClick=formName.inputName.value = "";

Posted: Tue Apr 20, 2004 6:35 pm
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?

Posted: Tue Apr 20, 2004 6:40 pm
by magicrobotmonkey
yesh, that is correct

Posted: Tue Apr 20, 2004 6:47 pm
by Chris Corbyn
Sorry, just me being stupid. It's working well now. Thanks

Posted: Tue Apr 20, 2004 6:48 pm
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?

Posted: Tue Apr 20, 2004 7:04 pm
by feyd
a box of type password can only display those marks.

Posted: Tue Apr 20, 2004 7:07 pm
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

Posted: Tue Apr 20, 2004 7:10 pm
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...

Posted: Tue Apr 20, 2004 7:11 pm
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.

Posted: Tue Apr 20, 2004 7:12 pm
by Chris Corbyn
Hmmm, I guess I'll just leave it masked. Starts getting scrappy when you need to do things like that.

Thanks! :-)

Posted: Tue Apr 20, 2004 7:14 pm
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.

Posted: Tue Apr 20, 2004 7:45 pm
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" />

Posted: Wed Apr 21, 2004 4:31 pm
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. :-)