Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Styling Input Field w/ JavaScript onfocus & onblur

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #25004
    Eraser35
    Member

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

    #58380
    Eraser35
    Member

    anyone?

    #58400
    AshtonSanders
    Participant

    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?

    #58413
    Eraser35
    Member

    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.

    #58423
    AshtonSanders
    Participant

    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 *****

    #58450
    Eraser35
    Member

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

    #58636
    Stack
    Member

    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.

    #66035
    kippy
    Participant

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.