SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  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 an input background-image on focus and stay that when once text is entered

    Please see:

    http://ubtemp.110mb.com/

    Have a look at the search box in the middle where there is a background on the input field which reads 'Please enter your post code'. I'd like to change this background image when the input field is clicked on and stay that way once text is entered.

    Preferably, I'd like to acheive this without placing javascript directly into the HTML. Any ideas?

    Many thanks.

  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)
    1. Use getElementById or something else via the DOM to find the INPUT element in question.
    2. Attach an "onfocus" event listener to it that calls a function, let's call it "bgChange".
    3. bgChange uses the this keyword to change the background image using the style object:
    Code:
    this.style.backgroundImage = 'newimage.gif'
    . Alternatively, you can just change or give it a class name and then in your CSS this class name triggers the new background image.

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. My grasp of javascript is very basic - would you be so kind as to show me a really basic example of what the code would look like?

    Many thanks.

  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)
    Why don't you have a stab at it and then I'll help you "debug" it? I remember someone asking a very similar question a few weeks or maybe a couple of months ago. Have you searched the JS forum for your question?

  5. #5
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've got this:

    Code:
    sfFocus = function() {
    	var sfEls = document.getElementsByTagName("INPUT");
    	for (var i=1; i<sfEls.length; i++) {
    		sfEls[i].onfocus=function() {
    			this.className+=" sffocus";
    		}
    		sfEls[i].onblur=function() {
    			this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfFocus);
    This changes the the background onfocus like I want, however it just changes back again onblur.

    How can I prevent this?

  6. #6
    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 remove the onblur bit.

    Also note that attachEvent is IE-only. The standard way of attaching event listeners is addEventListener (which doesn't work in IE).

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    So remove the onblur bit.

    Also note that attachEvent is IE-only. The standard way of attaching event listeners is addEventListener (which doesn't work in IE).
    Personally, I prefer to use a library, like the Yahoo UI Library. It has a cross-browser method for creating listeners.

  8. #8
    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)
    But if you only need the event-adding stuff, it's a horrible excess of bloat. This is good enough, unless you want to support really old and virtually dead browsers:
    Code:
    if (window.addEventListener) window.addEventListener('load', func, false);
    else if (window.attachEvent) window.attachEvent('onload', func);
    They are not the same thing, though.

  9. #9
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked a treat - thanks!

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    But if you only need the event-adding stuff, it's a horrible excess of bloat.
    Fair enough. But I find the entire library useful, so I don't consider it bloat.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Raffles View Post
    So remove the onblur bit.

    Also note that attachEvent is IE-only. The standard way of attaching event listeners is addEventListener (which doesn't work in IE).
    This are useful if you want to attach multiple events onto one particular object, but if you know you're only going to have one event then the traditional event registration tends to be more preferable.

    Code Javascript:
    object.onclick = func;
    Last edited by paul_wilkins; Jan 22, 2008 at 00:15.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to 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
  •