So I recently had to put together a form at work that people will be using to interface with our Mortgage System. One of the suggestions I came up with during the meeting (yay for me creating more work for myself?), was to highlight the current field that you were on. This adds a level of YOU ARE HERE as well as provides a reference marker in case someone has to walk away for a second, to come back and be like … “where was I?”.
So without further adieu, I provide to you the code that I used to fashion this together.
Javascript
window.onload = function() {
var ele = document.myForm.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’:
element.onmousedown = function() { this.className = ‘clrFocus’; }
element.onfocus = function() { this.className = ‘clrFocus’; }
element.onblur = function() { this.className = ‘clrBlur’; }
}
}
}
}
CSS
.clrFocus { background-color: #FFFF00; }
.clrBlur { background-color: #FFFFFF; }
As you can see above, I am essentially setting the class of the object via javascript upon both a focus shift (Either by tab or mouse click) as well as by mousedown (This was put into place since if you do not have this, you will be forced to click twice on dropdown boxes. Once for the focus, twice for the list. Don’t believe me? Try it out!
Initial Research Sources:
http://www.codeproject.com/KB/scripting/focusBGColor.aspx – I used the case functionality and element loop out of the bottom of this one. I initially tried to just use this; however, it didn’t work properly because of the mousedown issue identified above. I did try to add a listener for mousedown; but….this didn’t work so well as the boxes would stay yellow. For whatever reason it wasn’t triggering the onblur.
http://www.webdeveloper.com/forum/archive/index.php/t-151530.html – I got the idea to use CSS classes instead of the listener from the link above.
