SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the appearance of an input field onfocus

    I'm using the Suckerfish method (http://www.htmldog.com/articles/suckerfish/focus/) to change the appearance of an input field on focus. The only problem is that as soon as you click out of the field it changes back to its original state.

    How can I prevent this from happening, preferably without having to add any additional code directly into the HTML?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So you want it to change permanently the first time someone clicks in it? That would require javascript.

    It seems somewhat unorthodox and something users wouldn't expect. When I click in an input text box and it changes its appearance, I expect it to change back to how it was before when I click elsewhere.

    Still, if you want this, you'll have to use the onblur event on your input and set a class on it (which "triggers" the CSS for that class), but only if the class isn't there already of course.

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to explain a little more; the original state of the field contains a background image which reads 'Please enter your post code' - once you've written text in the field you would no longer want this background as it would obscure the text.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see. There is no way of doing this with CSS (though I believe there's a pseudo-class in CSS3 that allows you to do this). Javascript is needed. Briefly:
    Code:
    inp.onblur = function() {
      if (this.value.length > 0) this.className = 'filled';
    }
    where inp is a reference to the input field in question and 'filled' is a class name you can use to give it no CSS background.

    It seems better to me to have the text in there to begin with and remove it onfocus (with JS) or better still simply put "Postcode:" in a <label>.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •