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/archi...ating_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);