onclick text in form fields

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Smudly
Forum Commoner
Posts: 71
Joined: Wed Jun 09, 2010 10:09 pm

onclick text in form fields

Post by 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:

Code: Select all

<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>
User avatar
axcrow
Forum Newbie
Posts: 9
Joined: Mon Aug 09, 2010 12:22 pm

Re: onclick text in form fields

Post by axcrow »

Greetings =)
the second problem was that you were missing the second '=' in the if statement.
and the first - we catch an event onmousedown anywhere in the document - and call a function that does what we need.

Code: Select all

<script type="text/javascript">

document.onmousedown = function() {
	reset_values();
}

function reset_values(){
	if (document.login.username.value == ""){
		document.login.username.value ="Username";
	}
	if (document.login.password.value == ""){
		document.login.password.value ="Password";
	}
}

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

function make_blank1(){
	document.login.password.value ="";
}
</script>
Post Reply