Highlighting form fields with unobtrusive JavaScript

I wanted to alter the appearance of a form field when someone places their cursor in i, an effect that you see here and there.

My requirements for this were that I shouldn’t have to manually attach a Javascript event to every field and the code should be reusable on other sites without reconfiguration each time.

Using the principles of unobtrusive JavaScript I put together a short script, that when included on a page, will automatically add onFocus and onBlur handlers to all text and password fields on that page. When a field is activated it takes on the properties of a special CSS class. When it loses focus, it takes on the properties of another CSS class.

All you have to do to include this effect in your page is include the JavaScript file somewhere on the page and to add two CSS classes to your stylesheet. You decide how those CSS classes should make the form field look.

First, add the two CSS classes to your stylesheet and style them as you’d like. highlightActiveField is loaded when the field is activated. highlightInactiveField is loaded when the field loses focus.

.highlightActiveField {
    border: 1px solid black;
    border-left: 4px solid #BF1717;
    background-color: #DFDFDF;  
}

.highlightInactiveField {
    border: 1px solid black;    
    background-color: #fff;
}

Then add this JavaScript to the page somewhere — I created a file called highlightform.js and include it like this: <script type="text/javascript" src="highlightform.js"></script>

function initHighlight() {
    if (!document.getElementsByTagName){ return; }
    var allfields = document.getElementsByTagName("input");

    // loop through all input tags and add events
    for (var i=0; i<allfields.length; i++){
        var field = allfields[i];
        if ((field.getAttribute("type") == "text") || (field.getAttribute("type") == "password") ) {
            field.onfocus = function () {this.className = 'highlightActiveField';}
            field.onblur = function () {this.className = 'highlightInactiveField';}
        }
    }
}

// Nifty function to add onload events without overwriting
// ones already there courtesy of the lovely and talented
// Simon Willison http://simon.incutio.com/
function addLoadEvent(func) {   
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    } else {
        window.onload = function(){
        oldonload();
        func();
        }
    }
}

addLoadEvent(initHighlight);

Now step three… there is no step three! Just load your page and watch the magic.