Change the background color of the currently focused element

• Download source files - 0.81 KB

Introduction

When the user tabs off from an element, browsers by default just draw a border around the focused element. Sometimes it is hard to notice and if we want to help the user to find this easily, we can change the background color of the currently focused element. It will help them easily identify the focused element.

How do we do this?

We 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 the background color. You can use an RGB color code or a color name such as red, blue, green, etc. I have assigned red as my focus background color.

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

reSetBKColor will be assigned to the onBlur event. Whenever the element loses focus, the browser will call this method. In that method, we just set the temp bkColor to the current element's background color, and it will reset to the original background color.

We can directly assign those JavaScripts to every HTML form element tag or write a global event handler to attach the event to all form elements.

I will show you both ways.

Adding to the 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 a 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 the setListner function for the 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 a field, you will see the previous element's bkColor reset to the original bkColor and the focused element will change to the new bkColor.