fieldset onfocus/blur

[TheJoshMan]

Hey, I've been working on a pretty big form and it's easy to get lost in all the different form fields...

So i've grouped them in fieldsets and used css to reduce the opacity...

I was wondering, does the <fieldset> element not support the "onfocus" and "onblur" events?

I've tried using onfocus to make it opaque again, but it's not working.

I can use css to make it opaque when you hover over a fieldset, but i can't get it to stay opaque once you click on one.

Here's the code I'm using...
HTML:


<fieldset onfocus="this.className=this.className.replace('trans','opaque');" onblur="this.className=this.className.replace('opaque','trans');" >
<label for="hHead">home-heading-1 <span>(first word must be wrapped with &lt;span class="orange"&gt; &lt;/span&gt;</span></label><br />
<input name="hHead" type="text" class="small" value='<span class="orange">custom</span> fabrication'>
<input type="submit" value="submit heading changes" class="small-button"/>
</fieldset>


CSS:


.trans {
opacity: 0.4;
filter: alpha(opacity=40);
}
.opaque {
opacity: 1;
filter: alpha(opacity=100);
}

[Schmoopy]

Unforunately the onblur and onfocus attribute do not exist for the fieldset tag.

Also, did you mean to put :



value='<span class="orange">custom</span> fabrication>'


Just for clarification.

[TheJoshMan]

I used the code for the less than and greater than to prevent it from actually running the code.

[TheJoshMan]

anyone know a similar way to accomplish the same end result?

[jscheuer1]

I'm not positive that this will apply in this case, but it works very well where it does:

http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

[TheJoshMan]

I got it to work using this...



function presentForm()
{
var eleDiv;
var eleForms;

if (document.getElementById && document.getElementsByTagName)
{
eleDiv = document.getElementById("form");
eleForms = eleDiv.getElementsByTagName("form");
for (var intCounter = 0; intCounter < eleForms.length; intCounter++)
{
eleInputs = eleForms[intCounter].getElementsByTagName("input");
eleTextAreas = eleForms[intCounter].getElementsByTagName("textarea");

applyFunctionToFormElements(eleInputs);
applyFunctionToFormElements(eleTextAreas);
}
}
}

function applyFunctionToFormElements(htmlObjectCollection)
{

for (var intCounter = 0; intCounter < htmlObjectCollection.length; intCounter++)
{
if(htmlObjectCollection[intCounter].className != "button")
{
htmlObjectCollection[intCounter].onfocus = function ()
{
clearFieldsetsAndLabels();
this.parentNode.parentNode.parentNode.className = "fieldsetHighlight";
this.previousSibling.className = "labelHighlight";
}
}
}
}

function clearFieldsetsAndLabels()
{
var eleDiv;
var eleFieldsets;
var eleLabels;

eleDiv = document.getElementById("form");
eleFieldsets = eleDiv.getElementsByTagName("fieldset");
eleLabels = eleDiv.getElementsByTagName("label");
clearEle(eleFieldsets);
clearEle(eleLabels);
}

function clearEle(elements)
{
for (var intCounter = 0; intCounter < elements.length; intCounter++)
{
elements[intCounter].className = "";
}
}

function addLoadEvent(func) {

var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(presentForm);