Eraser35

# May 29, 2009 at 3:46 pm

I have styled my Email and Password input fields with with some JavaScript/CSS so that when user clicks on the Email field for example the "Email" value is removed. Likewise the same thing takes place when the user clicks on the Password field. I also have small topfade.gif image being placed inside the input field when it is clicked on, more or less to highlight the field in focus (but there is no issue with this.)

However, there is one little bug with my script (as far as I can tell.) If I click on the Email field for example, start typing in my email, then decide to move my cursor away from the Email field (taking Email out of focus) and then put my cursor back in the Email field, the previously entered email text is deleted.

How can I get it to keep the previously inputted text?

HTML

Code:

CSS

Quote:

.textinput {
background: #FFFFFF;
border:1px solid #1A2022;
margin:2px;
padding:4px;
vertical-align:middle;
width:160px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

.textinput:focus {
background: url(../images/topfade.gif) repeat-x scroll center top;
}

Eraser35

# May 29, 2009 at 8:30 pm

anyone?

AshtonSanders

# May 30, 2009 at 12:19 am

All I use is onfocus and onblur:

HTML

Code:

onfocus=”if(this.value==’Enter your email…’) this.value=”;”
onblur=”if(this.value==”) this.value=’Enter your email…’;”

Makes sense?

Eraser35

# May 30, 2009 at 10:13 am

Cool, this is a better approach. Thank you.

How do you get your Password field to display "Password" in text instead of ******** prior to user input? Obviously when user inputs password, it will star it out.

AshtonSanders

# May 30, 2009 at 8:08 pm

I don’t know the exact javascript (or if it’s really possible in all browsers), but you’d have to change the input type to "text" for it to show "password" and then change bit back to get it to show *****

Eraser35

# May 30, 2009 at 10:02 pm

Facebook is a good example of this particular functionality on their login page. I’ve seen it other places too.

Stack

# June 5, 2009 at 1:04 pm

To get it to change from stars to text you would include these in your onfocus and onblur events:
onfocus="this.type=’password’ onblur if(this.value==”){this.value=’Enter your email…’; this.type=’text’;}"

and start it off as type="text". be sure not to allow it to turn back to text if anything is entered into the box or it will reveal the password.

kippy

# October 29, 2009 at 5:54 pm

Do you happen to have a full example of this technique? I have tried to piece it together from the previous post, but I must be missing something. Thanks for any help you can provide.