BSP / HowTo: Highlight your input fields

[craigcmehil]

Again this does conflict with the whole "accessibility series" to an extent but again when you have limited options you have to do what you have to do.

So this is another quickie from Dynamic Drive and very easy to implement.

To implement this you simply have to add the following to your page either as an include or just to the page somewhere.
           //Highlight form element- © Dynamic Drive (<a href="http://www.dynamicdrive.com" target="_blank">www.dynamicdrive.com</a>)      //For full source code, 100's more DHTML scripts, and TOS,      //visit <a href="<a href="http://www.dynamicdrive.com     " target="_blank">http://www.dynamicdrive.com     </a>" TARGET="test_blank"><a href="http://www.dynamicdrive.com     " target="_blank">http://www.dynamicdrive.com     </a></a>; var highlightcolor="yellow"      var ns6=document.getElementById&&!document.all      var previous=''      var eventobj      //Regular expression to highlight only form elements      var intended=/INPUT|TEXTAREA|SELECT|OPTION/      //Function to check whether element clicked is form element      function checkel(which){      if (which.style&&intended.test(which.tagName)){      if (ns6&&eventobj.nodeType==3)      eventobj=eventobj.parentNode.parentNode      return true      }      else      return false      }      //Function to highlight form element      function highlight(e){      eventobj=ns6? e.target : event.srcElement      if (previous!=''){      if (checkel(previous))      previous.style.backgroundColor=''      previous=eventobj      if (checkel(eventobj))      eventobj.style.backgroundColor=highlightcolor      }      else{      if (checkel(eventobj))      eventobj.style.backgroundColor=highlightcolor      previous=eventobj      }      }     

Once that is in place you then need to add the following lines to your page.

        highlight(event)                          highlight(event)     

Oh and be sure you gave your form an id and then put the right id into those lines.

Once that is there and in place you are basically done.



What you can now do is if you have a user preference section you can actually allow the enabling and disabling of this option, as well as allowing them to select the color for the background this of course giving the user more control over how they work.

This is actually something I've recently implemented, provided the user variable is set to true I active the two lines which assign the event to the form and I dynamically set the color the user has selected.