#
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
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;
}