Link to home
Start Free TrialLog in
Avatar of cdemott33
cdemott33Flag for United States of America

asked on

Textbox with "ghost" instructional text

I have noticed the use of "ghost" text in a number of applications - for example, a Password textbox that says "Enter Password" which disappears when you click inside the box so you can enter your password.

Does any know of a script I can use to achieve this same effect?  

One thing to note is if the user does not enter anything in the box the box should be empty and not actually submit the "Enter Password" ghost text.

My site is running on and IIS server, if that makesa difference.  Thanks!
Avatar of Andyc75
Andyc75
Flag of Canada image

This can be done with Javascript.

The Idea is to have a default value in the input field.
If a user clicks into the field the value is cleared and they enter their own value.
If the user submits the form with out entering a value it calls a function to clear the default text.

Here is a script I just wrote that shows this effect as an example:

Give it a try and let me know if you like it.
<html>
<head>
	<script type="text/javascript">
		function clearGhostText(){
			//Clear the Ghost Text if it is still set.
			var name = document.getElementById('name')
			if(name != null){
				if(name.value == 'Enter Your Name'){
					name.value = '';
				}
			}
			
			var email = document.getElementById('email')
			
			if(email != null){
				if(email.value == 'Enter Your Email'){
					email.value = '';
				}
			}

			
		}
	</script>
</head>
<form>

<input type="text" id="name" name="name" value="Enter Your Name" onfocus="this.value='';" />
<input type="text" id="email" name="email" value="Enter Your Email" onfocus="this.value='';" />
<input type="submit" onclick="clearGhostText();" />

</form>

</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Andyc75
Andyc75
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of cdemott33

ASKER

VERY NICE!  Worked as expected.  Thank you!