[thelist] DOM dummy needs help
ben morrison
morrison.ben at gmail.com
Tue Apr 18 10:27:25 CDT 2006
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
More information about the thelist
mailing list