onclick text in form fields

[Smudly]

Hello,

 

I've created two form fields (username, password).

When a user comes to the page, the word "Username" is shown in the first form field. The word "Password" is shown in the second field. When a user clicks inside the field, the word inside the field erases automatically, allowing them to type in their username.

 

Everything above is working, except I'm running into some problems.

 

1st:

I need to figure out a way to include an if statement, that displays "Username" once again, if they did not type anything in the username field, and they clicked outside of the field. This will be the case for the Password field as well.

 

2nd:

If a user types in their username in the username field, then types in their password, but clicks on the Username field once again to fix a typo, it completely erases their username from the field, making them have to type it all again.

 

I've included my code below. Thanks!

 

Any help appreciated   :banghead:

 

<script type="text/javascript">
function make_blank()
{
if(document.login.username.value ="Username"){
document.login.username.value ="";
}
}
function make_blank1()
{
document.login.password.value ="";
}
</script>
<style>
.loginboxdiv
{
margin:0;
height:22px;
width:102px;
background:url(../img/loginbox.gif) no-repeat bottom;
}
.loginbox
{
background:none;
border:none;
width:100px;
height:20px;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<form name="login" action="template.html" method="POST">
		<div class="loginboxdiv" id="username">
		<input type="text" class="loginbox" name="username" value="Username" onclick="make_blank();">
		</div>
		<div class="loginboxdiv" id="password">
		<input class="loginbox" name="password" type="text" value="Password" onclick="make_blank1();">
		</div>
		</form>

 

[AtlasC1]

The answer to your second question lies in the following line:

 

if(document.login.username.value ="Username")

 

You should be using two '=' signs to do comparisons. Otherwise, this is setting the value to Username and always evaluating as true. So, use:

 

if(document.login.username.value =="Username")

 

And, for your first question, you want to use an onBlur function. For example:

 

Input field:

<input type="text" class="loginbox" name="username" value="Username" onclick="make_blank();" onBlur="undoBlank();">

 

Javascript:

function undoBlank() {
  if(document.login.username.value == ""){
    document.login.username.value ="Username";
  }
}

 

Hope that answers your questions

You might also want to add on to your onClick function for the password, setting the type='password', so when people type their password into it, it won't show the characters.

 

-jm

[Smudly]

Wow! That helps a lot!

 

When I do type="password" on the password field, instead of it displaying "Password" when the page loads, it displays 8 round black circles (as if you were typing in a password).

 

What can I do to make the type Text only when page loads, and password when they type a password?

 

Thanks

[AtlasC1]

I would do it the same way you're changing the input value, my friend 

You can change pretty much any tag's attribute with javascript, which is pretty neat. i.e.,

function make_blank1() {
  document.login.password.value ="";
  document.login.password.type ="password";
}

 

So, when they click in the password field, not only does it change the value to "", but it also changes the type to "password".

 

-jm

[Smudly]

Cool! Now after some additional testing I'm having one more minor problem that I can't get around.

 

After I typed in my username, I just hit "Tab" on my keyboard to get to the next field. Once I started typing in the password in that field, the letters that were being typed were showing as Letters, instead of the hidden black circles. How can I get around this?

 

Here's my current code having to do with this issue:

<style>
.loginboxdiv
{
margin:0;
height:22px;
width:102px;
background:url(../img/loginbox.gif) no-repeat bottom;
}
.loginbox
{
background:none;
border:none;
width:100px;
height:20px;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<script type="text/javascript">
function make_blank()
{
if(document.login.username.value =="Username"){
document.login.username.value ="";
}
}
function make_blank1()
{
if(document.login.password.value =="Password"){
document.login.password.value ="";
document.login.password.type ="password";
}
}
function undoBlank() {
  if(document.login.username.value == ""){
    document.login.username.value ="Username";
  }
}
function undoBlankpass() {
  if(document.login.password.value == ""){
    document.login.password.value ="Username";
  }
}
</script>
<form name="login" action="../login.php" method="POST">
		<div class="loginboxdiv" id="username">
		<input type="text" class="loginbox" name="username" value="Username" onclick="make_blank();" onBlur="undoBlank();">
		</div>
		<div class="loginboxdiv" id="password">
		<input class="loginbox" type="text" name="password" type="text" value="Password" onclick="make_blank1();" onBlur="undoBlankpass();">
		</div>
		<div id="login">
		<input type="image" src="img/login.png" alt="Login">
		</div>
		</form>

[AtlasC1]

I figured that may be your next question. Instead of using onClick as an event handler, try using onFocus.

 

Another thing I've noticed many people do is start the initial value of the input field as a lighter color:

 

.loginbox
{
  color:#CCC;
  /* The rest of your style... */
}

 

And, in addition to what you already have in your make_blank() function, you could add

 

document.login.username.style.color ="#000";

 

It isn't really necessary, just more text effects you could use. So, the username/password fields start off as a light grey color, and when a user types something, the font color will change to black. You'd also want to add this to your undoBlank() function, in order to make it go back to the grey color, if it is changed back to the default value:

 

document.login.username.style.color="#CCC";

 

-jm

[Smudly]

Dang, I owe you big time.

Everything works perfectly.

 

Thanks very very very much!