Click here to Skip to main content
6,629,377 members and growing! (23,681 online)
Email Password   helpLost your password?
Web Development » Client side scripting » General     Intermediate

Change Background color of current focus element

By senthil karuppaiah

Change Background color of current focus element when user Tab off
Javascript, Windows, Visual Studio, IE 6.0, IE 5.5, Dev
Posted:20 Aug 2006
Updated:31 Aug 2006
Views:59,638
Bookmarked:8 times
Unedited contribution
Announcements
Loading...
 
Search    
Advanced Search
Add to IE Search
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
9 votes for this article.
Popularity: 2.90 Rating: 3.04 out of 5
1 vote, 11.1%
1

2
4 votes, 44.4%
3
2 votes, 22.2%
4
2 votes, 22.2%
5

Sample Image - focusBGColor.jpg

Introduction

When the user tabs off from an element, Browsers by default just draw border around the focused element. Some time it is hard to notice and if we want to help the user to find it easily, we can change the background color of the current focused element. It will help them easily indetify the focused element.

How do we do that?

Need some javascript to set and reset the background color.

var bkColor = "red";
function getEvent(e){
if(window.event != null) {
return event;
}
return e;
} function setBKColor(e){ e = getEvent(e);
var src = e.srcElement || e.target;
if(src != null) { src.style.bkColor = src.style.backgroundColor; src.style.backgroundColor = bkColor; } } function reSetBKColor(e){ e = getEvent(e);
var src = e.srcElement || e.target;
if(src != null) { src.style.backgroundColor = src.style.bkColor; } }

you can set any color for the global variable bkColor which will be used for setting background color.you can use RGB color code or color name such as red,blue,green etc.I have assigned red as my focus background color.

setBKColor will be assigned to onFocus event. when ever element receives focus, Browser will call this method. In that method, we store the original bkColor in temp variable and we just set the global bkColor variable to the current element's background color.

reSetBKColor will be assigned to onBlur event. when ever element looses focus, Browser will call this method. In that method, we just set the temp bkColor to the current element's background color, it will reset to original background color.

We can directly assign those javascripts to every html form element tags or write a global event handler to attach event to all form elements.

I will show you both ways.

Adding to HTML tag

<input type="text" onfocus="setBkColor(event);" onblur="reSetBKColor(event);"

<input type="radio" id= "rd1" onfocus="setBkColor(event);" onblur="reSetBKColor(event);"

If you like to add global handler

<script language="javascript">
function attachEvent(name,element,callBack) {
    if (element.addEventListener) {
      element.addEventListener(name, callBack,false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + name, callBack);
    }
  }
function setListner(eve,func) {
   var ele = document.forms[0].elements;
   for(var i = 0; i <ele.length;i++) {
    element = ele[i];
    if (element.type) {
      switch (element.type) {
        case 'checkbox':
        case 'radio':
        case 'password':
        case 'text':
        case 'textarea':
        case 'select-one':
        case 'select-multiple':
           attachEvent(eve,element,func);
       }
     }
  }
}
setListner("focus",setBKColor);
setListner("blur",reSetBKColor);
</script>
 

We need to call setListner function for focus and blur functions. It will loop through all elements and attach the particular function (second argument) to the event (first argument).

Now if you launch the html and TAB off from one field to another or click inside an field, you will see previous element's bkColor reset to original bkColor and focus element will change to new bkColor.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

senthil karuppaiah


Member
Fourteen years of progressive experience in Software Product Development, tactical planning, project and client management, demonstrated success in leadership, critical thinking, problem solving and analysis. Diverse knowledge and experience with multiple development methodologies, reengineering, software engineering, and integration of heterogeneous systems.
Occupation: Web Developer
Location: United States United States

Other popular Client side scripting articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 7 of 7 (Total in Forum: 7) (Refresh)FirstPrevNext
Generalit doesnt work with UpdatePanel PinmemberSelcuk OZDOGAN4:57 18 Feb '09  
Questiondoes it work without a form tag? PinmemberAlderaic-4:16 5 Sep '06  
GeneralOnly for IE ? Pinmemberstevejebson22:57 29 Aug '06  
GeneralRe: Only for IE ? Pinmembersenthil karuppaiah7:17 31 Aug '06  
GeneralNice one [modified] PinmemberRamesh Ramalingam20:38 20 Aug '06  
GeneralRe: Nice one Pinmembersenthil karuppaiah5:16 21 Aug '06  
GeneralRe: Nice one PinmemberRamesh Ramalingam19:20 21 Aug '06  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 31 Aug 2006
Editor:
Copyright 2006 by senthil karuppaiah
Everything else Copyright © CodeProject, 1999-2009
Web20 | Advertise on the Code Project