Forum Moderators: open
What I want is simple and I've seen it places, but I can no longer remember the addresses. At the top of my webpage I have a login and a password box. Since space is at a premium I'd like to firstbox to contain the word "login" and when clicked the first time it automatically erases the textbox. The second time it's clicked iI'd like the contents to not change, if possible.
The second one is fine haveing stars in it then having them go away when clikced like the one above, but is it possible to make it say "password" then have the box turn into a password field after that so it displays stars after clicked? (That's my bonus question since I have everyone's attention.)
Thanks a million for thinking about it!
The first request can be done with the following code:
<script language="javascript">
function clearInput(e){
if(e.value=='input here')e.value="";
}
</script>
<input type="text" onclick="clearInput(this)" value="input here">
>>The second one is fine haveing stars in it then having them go away when clikced like the one above, but is it possible to make it say "password" then have the box turn into a password field after that so it displays stars after clicked? (That's my bonus question since I have everyone's attention.)
For this you would have to create a input type of text for the password box, once the user has clicked the first input box you would then 'hide' the input and 'show' the input type = password. It would be a visual trick to the user, is it worth it?
-George
If there's to be something in the field to start with, it'll have to be type="text", else it won't be very informative. However, you can't switch type later (browser doesn't like it). This could be got round by replacing the original field with another when it receives focus the first time. This isn't a good idea, as it makes things complicated when JS is disabled.
[BTW, this wasn't written in response to AlternativeFuture's post :)]
The best work-around I could think of is use a background image for the text. It needs to be assigned via JS, else it will appear with JS-disabled browsers, but never disappear.
I have used the onfocus handler. This is generally better than onclick, as it responds to arrival via tabbing. Remember that when testing, you must click outside the field, to blur, before refreshing.
<html><head><title>password</title>
<script type = "text/javascript">
onload = function()
{
var pStyle = document.getElementsByName('passwd')[0].style
pStyle.backgroundColor="transparent";
pStyle.backgroundImage="url(pass.gif)";
pStyle.backgroundRepeat="no-repeat";
}
</script>
</head>
<body>
<form>
<input name="passwd" type="password"
onfocus="this.style.backgroundImage='';"/>
</form></body></html>
Thanks again! This is a wonderful forum...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Input Fun</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var clr_set=0;
</script>
</head>
<body>
<form>
<input onfocus="this.value=''" type="text" value="some text" />
<input onfocus="this.select()" type="text" value="some text" />
<input onfocus="if(clr_set==0)this.value='';clr_set=1;" type="text" value="some text" />
<div style="position:relative;">
<input type="password" value="pass" />
<input style="position:absolute;top:0;left:0;" onfocus="this.style.display='none';" type="text" value="some text" />
</div>
</form>
</body>
</html>
<form>
<input name="pass" style="display:none;" type="password" />
<input onfocus="this.style.display='none';pass.style.display='';" type="text" value="enter password" />
</form>
I suppose the no-JS scenario could be accommodated by using your noscript tag trick; give the covering element a display value of none in a style sheet that is within noscript tags.
