[thelist] DOM dummy needs help

[ben morrison]

On 4/18/06, Michael Pack <michaelpack at wvdhhr.org> wrote:
> Hi all, I'm a DOM dummy and the Microsoft lack of support for CSS
> psuedo:focus is forcing me to turn to javascript. I'm working on an UI
> which will contain alot of forms. I'm wanting to increase usability by
> highlighting the inputs, select, and textarea. I'm looking for
> suggestions.

I've been using something similar and also adding clickable labels for safari:

// Custom label focus fixes safari and enables classes
	// passes to blurClass and focusClass
	// IE cannot use label.getAttribute('for') so use label.htmlFor instead
	function focusInput () {
		focusLabels ();
		if(!document.getElementsByTagName) return false;
		var inputs = document.getElementsByTagName("input");
		for(i=0;i<inputs.length;i++) {
			inputs[i].onfocus = function () {focusClass(this);};
			inputs[i].onblur = function () {blurClass(this)};
		}
		var texts = document.getElementsByTagName("textarea");
		for(i=0;i<texts.length;i++) {
			texts[i].onfocus = function () {focusClass(this);};
			texts[i].onblur = function () {blurClass(this)};
		}
		var selects = document.getElementsByTagName("select");
		for(i=0;i<selects.length;i++) {
			selects[i].onfocus = function () {focusClass(this);};
			selects[i].onblur = function () {blurClass(this)};
		}
	}//End of focusInput

	function focusLabels () {
		if(!document.getElementsByTagName) return false;
		var labels = document.getElementsByTagName("label");
		for(i=0;i<labels.length;i++) {
			if(!labels[i].htmlFor) continue;
			labels[i].onclick = function () {
				var field = this.htmlFor;
				var focusMe = document.getElementById(field);
				focusMe.focus();
			}
		}
	}//End of focusLabels

	function focusClass (id, nameClass){
		if (id.className=="") {
				id.className= "Hovers";
				} else {
				id.className+=" Hovers";
				}
	 }//End of focusClass

	 function blurClass (id, nameClass){
		if (id.className=="Hovers") {
				id.className= "";
				} else {
				id.className=id.className.replace(new RegExp(" Hovers\\b"), "");
				}
	 }//End of blurClass

	window.onload = function() {
	focusInput ();
	}

This keeps the colour changes in CSS so easier to change.

.Hovers {
background:#FFFFCC;
}

I'm sure there is a more elegant way to achieve this...

Ben