korsohill Posted June 7, 2009 Share Posted June 7, 2009 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 More sharing options...
cedric Posted June 7, 2009 Share Posted June 7, 2009 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 More sharing options...
chibineku Posted June 7, 2009 Share Posted June 7, 2009 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"}} Link to comment Share on other sites More sharing options...
korsohill Posted June 8, 2009 Author Share Posted June 8, 2009 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? Link to comment Share on other sites More sharing options...
cedric Posted June 8, 2009 Share Posted June 8, 2009 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 More sharing options...
korsohill Posted June 8, 2009 Author Share Posted June 8, 2009 Hm. This works better but it's buggy. Whatever, I'm going to use it. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.