Home › Forums › JavaScript › Styling Input Field w/ JavaScript onfocus & onblur
- This topic is empty.
-
AuthorPosts
-
May 29, 2009 at 3:46 pm #25004
Eraser35
MemberI 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:
CSSQuote:.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;
}May 29, 2009 at 8:30 pm #58380Eraser35
Memberanyone?
May 30, 2009 at 12:19 am #58400AshtonSanders
ParticipantAll 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?
May 30, 2009 at 10:13 am #58413Eraser35
MemberCool, 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.
May 30, 2009 at 8:08 pm #58423AshtonSanders
ParticipantI 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 *****
May 30, 2009 at 10:02 pm #58450Eraser35
MemberFacebook is a good example of this particular functionality on their login page. I’ve seen it other places too.
June 5, 2009 at 1:04 pm #58636Stack
MemberTo 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.
October 29, 2009 at 5:54 pm #66035kippy
ParticipantDo 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.