SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OnFocus Background change

    Hello guys,

    First off, I know nothing about JS. Second, I'm looking to achieve the effect of having a search box e.g.

    [xhtml]<input type="text" class="search" />[/xhtml]

    .search {
    background: #fff;
    }

    But when someone clicks in the search box, I want it to change to

    .searchhilite {
    background: #000;
    }

    Then when they exit it change back to:

    .search {
    backgrond: #fff;
    }

    I got linked to here: http://www.w3schools.com/jsref/jsref_onfocus.asp however that doesn't fit my needs as when you click out of the box, it's still yellow.

    Any help would be greatly appreciated .

  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)
    As well as onfocus, you need onblur. So, onfocus, change it to .searchhilite, then onblur change it to .search. I'd do this:
    HTML Code:
    <input type="text" class="search" id="search">
    Code:
    var s = document.getElementById('search');
    s.onfocus = function() {this.className = 'searchhighlight';}
    s.onblur = function() {this.className = 'search';}
    You should be able to just do this with CSS:
    Code:
    search {background:#FFF}
    search:focus, search:active {background:#000}
    But IE6 doesn't support :focus. IE7 might, I'm not sure. IE6 however, does support :active, so it might be that you don't need javascript at all. Try the CSS above and if it's no good, go with Javascript.


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
  •