Jump to content

Forms With Dis/re-appearing Text


korsohill
 Share

Recommended Posts

I'm trying to make my login form small, and would like to have "Username" and "Password" disappear when the user clicks on the form, and reappear if no text is entered and they click off of the input. I'm having way more trouble than I should trying to figure this out, any help?If you need an example, check out Facebook.

Link to comment
Share on other sites

I think this should do the trick.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title></title><script type="text/javascript">function erase() { 	document.getElementById('email').setAttribute('value','');}function back()	{	document.getElementById('email').setAttribute('value','email')}</script></head><body>	<input id="email" onfocus="erase()" onblur="back()" value="email" />		</body></html>

Link to comment
Share on other sites

I think this should do the trick.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title></title><script type="text/javascript">function erase() { 	document.getElementById('email').setAttribute('value','');}function back()	{	document.getElementById('email').setAttribute('value','email')}</script></head><body>	<input id="email" onfocus="erase()" onblur="back()" value="email" />		</body></html>

You don't need the erase function, just put:
<input id="email" [b]onfocus="this.value=''"[/b] onblur="back([b]this[/b])" value="email" />

Also, you want to check if the field is empty before re-writing the value to email:

function back(el) {if el.value=="" {el.value="e-mail"}}

Edited by chibineku
Link to comment
Share on other sites

Hm. The first script worked, the second one didn't! Dunno what's wrong with it, I hate Javascript!Thanks so much Cedric!Ooohhh, one problem now...obviously the password field is dots, but "password" also shows up as dots then.Is there a way to get it in plain text, but then have it be typed in as dots?

Edited by korsohill
Link to comment
Share on other sites

First, I know my scripting isn't what it should be but i'm new to this aswell.Second, this is my solution to the password problem, maybe it's a bit long but it works fine.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title></title><script type="text/javascript">function erase() { document.getElementById('email').setAttribute('value','');}function back() { document.getElementById('email').setAttribute('value','email')}function erase1() { document.getElementById('password').setAttribute('value',''); document.getElementById('password').setAttribute('type','password');}function back1() { document.getElementById('password').setAttribute('type','text'); document.getElementById('password').setAttribute('value','email');}</script></head><body> <input id="email" type="text" onfocus="erase()" onblur="back()" value="email" /> <input id="password" type="text" onfocus="erase1()" onblur="back1()" value="password" /> </body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...