Hide Focus attribute and CSS

This is an odd MSIE proprietary attribute (‘hidefocus‘) that is used to remove the dotted border (outline) of the focused elements, usually links or images, in the page. Modern CSS is much more robust and should be used in most cases for valid HTML.

The example below requires you to add the class specifically to elements, but your design may allow for you to do so for as elements of larger components of your design.

<style type="text/css">
.hidefocus:focus {
outline: none;
}
</style>

<a href="#" class="hidefocus" hidefocus="true">Some link</a>

NOTE: You should still provide some sort of visual focus mechanism for accessibility purposes, even when you prevent the default behavior.

REFERENCES:

Auto focus ‘first visible’ form field on page…

Occassionally there comes a need to set the focus within a web page to the first ‘visible’ form field, here’s the most convenient I’ve found thus far…

Implementation:
1. Add the following Javascript to the HEAD section of your page.

function formfocus() {
if(document.forms.length > 0)
{
var formElements = ["text", "checkbox", "radio", "select-one", "select-multiple", "textarea"];
var form = document.forms[document.forms.length-1];
for (var j = 0; j < form.elements.length; j++)
{
var field = form.elements[j];
for(var x = 0; x < formElements.length; x++)
{
if (field.getAttribute("type") == formElements[x])
{
field.focus();
return false;
}
}
}
}
}

2. Add the function call to the BODY tag…

<body onload="formfocus();">

That’s it! Enjoy!