Change Background color of current focus element

• Download source files - 1 Kb

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.