Need someone to lead product or development at your software company? I lead product and engineering teams and I'm looking for my next opportunity. Check out my resume and get in touch.

Highlighting form fields with unobtrusive JavaScript

Freshness Warning
This blog post is over 14 years old. It's possible that the information you read below isn't current and the links no longer work.

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.

Joseph Scott
July 19, 2006 9:19 PM

You can do this with plain CSS: input:focus, textarea:focus { background-color: yellow; } This works in Firefox, Opera and Safari. Of course IE doesn't properly support :focus on form fields :-(

Adam Kalsey
July 19, 2006 10:16 PM

Yes, since IE doesn't support the :hover pseudoclass on anything but links, it's neccessary to use JavaScript.

Jemaleddin
July 20, 2006 7:57 AM

You can also use Peter Nederlof's whatever:hover to add :hover, :focus and :active to IE: http://www.xs4all.nl/~peterned/csshover.html

Philip Tellis
July 29, 2006 1:51 AM

Problems: - If the textbox already has a class, your method overwrites it. - If the textbox already has onblur/onfocus event handlers, your method overwrites those. You know how to handle the latter. For the former, I'd suggest adding "highlightActiveField" to the className (.className += " highlightActiveField") onfocus and removing it onblur:.className = .className.replace(/ *highlightActiveField/g, '');

Dave
August 10, 2006 6:08 AM

This is pretty sweet, thanks for sharing.

trovster
August 17, 2006 7:25 AM

I threw the following together. It relies on some other functions, such as addClass, removeClass and addEvent. But it works for all form elements, not limiting to type="text" and type="password". The addEvent means events are not overwritten. And similarly addClass makes sure existing classes are not overwritten. Also, you do not need a default unfocused class, as you can simply use the element itself. input, textarea { border: 1px solid #ccc; } input.focused, textarea.focus_element { border-color: #000; } var focus_class = 'focus_element'; function form_focus_fix() { if(!document.createElement || !document.getElementsByTagName || !document.getElementById) return false; var form_collection = document.getElementsByTagName('form'); var form_collection_length = form_collection.length; for(i=0; i<form_collection_length; i++) { for(j=0; j<form_collection[i].elements.length; j++) { addEvent(form_collection[i].elements[j],'focus',function(){addClass(this,focus_class)}); addEvent(form_collection[i].elements[j],'blur',function(){removeClass(this,focus_class)}) } } }

This discussion has been closed.

Recently Written

Domain expertise in Product Management (Nov 16)
When you're hiring software product managers, hire for product management skills. Looking for domain experts will reduce the pool of people you can hire and might just be worse for your product.
Strategy Means Saying No (Oct 27)
An oft-overlooked aspect of strategy is to define what you are not doing. There are lots of adjacent problems you can attack. Strategy means defining which ones you will ignore.
Understanding vision, strategy, and execution (Oct 24)
Vision is what you're trying to do. Strategy is broad strokes on how you'll get there. Execution is the tasks you complete to complete the strategy.
How to advance your Product Market Fit KPI (Oct 21)
Finding the gaps in your product that will unlock the next round of growth.
Developer Relations as Developer Success (Oct 19)
Outreach, marketing, and developer evangelism are a part of Developer Relations. But the companies that are most successful with developers spend most of their time on something else.
Developer Experience Principle 6: Easy to Maintain (Oct 17)
Keeping your product Easy to Maintain will improve the lives of your team and your customers. It will help keep your docs up to date. Your SDKs and APIs will be released in sync. Your tooling and overall experience will shine.
Developer Experience Principle 5: Easy to Trust (Oct 9)
A developer building part of their business on your product needs to believe that you're going to do the right thing for them and their customers.
Developer Experience Principle 4: Easy to Get Help (Oct 8)
The faster you can unblock a stuck developer, the better their experience will be.

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2020 Adam Kalsey.