killFocusLines() for AJAX

in all situations, where the page is not completely reloaded, like a navigation in a frame or an AJAX-application, the dashed box around a clicked link, sometimes also called focus lines, is simply annoying. this is why handgestrickt wrote a function that removes these boxes on a per element base. an element is identified by its id. this gives you a good flexibility. if you load new content with AJAX, you can remove the box after inserting the HTML. this function requires Prototype.js or any other framework providing $().

var foo = {
        killFocusLines: function(element) {
                var a_tags = $(element).getElementsByTagName('a');
                for(var a=0;a<a_tags.length;a++) a_tags[a].onfocus = function() { this.blur(); }
                var inputs = $(element).getElementsByTagName('input');
                for(var a=0;a<inputs.length;a++) {
                        var type = inputs[a].getAttribute('type');
                        if(
                                type &&
                                type.search(/^(?:submit|reset|button|radio|checkbox)$/i) != -1
                        ) inputs[a].onfocus = function() { this.blur(); }
                }
                var area_tags = $(element).getElementsByTagName('area');
                for(var a=0;a<area_tags.length;a++) area_tags[a].onfocus = function() { this.blur(); }
        }
}

usage:

foo.killFocusLines('bar');