Input Field Focus ()

[FormLess]

I'm using JS to dynamically change the CSS attrib's of User Input Fields in
a form.

It works fine for text input fields but does not seem to work at all for
TEXTAREAS. (IE6)

Is there a tweak that might overcome this limitation?

Here's the juice:

====================== ext js file =========

sfFocus = function() {
var sfEls = document.getElementsByTagName
("INPUT");
for (var i=0; i<sfEls.length; i++) {
sfEls.onfocus=function() {
this.className+=" sffocus";
}
sfEls.onblur=function() {
this.className=this.className.replace
(new RegExp(" sffocus\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent
("onload", sfFocus);

======================== ext. css ===========
input:focus, textarea:focus {
background: #cfc;
border-color: #090;
}
input.sffocus, textarea.sffocus {
background: #cfc;
border-color: #090;
}

=======================================

the TEXTAREA and INPUT fields have names, id's and default formatting
classes applied to them. Oddly enough, in both OPERA & FF, the TEXTAREA
DOES change color properly with focus applied. IE6 is the only one where it
does not work.

thanks for any assistance on this.

 

[Peter Michaux]

I'm using JS to dynamically change the CSS attrib's of User Input Fields in
a form.

It works fine for text input fields but does not seem to work at all for
TEXTAREAS. (IE6)

Is there a tweak that might overcome this limitation?

Here's the juice:

====================== ext js file =========

sfFocus = function() {
var sfEls = document.getElementsByTagName
("INPUT");

The above line doesn't find elements with tag name "textarea". So the
handlers below are not added to the textareas.

for (var i=0; i<sfEls.length; i++) {
sfEls.onfocus=function() {
this.className+=" sffocus";
}
sfEls.onblur=function() {
this.className=this.className.replace
(new RegExp(" sffocus\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent
("onload", sfFocus);

attachEvent() is for IE. For DOM2 compliant browsers you want
addEventListener()


Peter

 

[FormLess]

I'm using JS to dynamically change the CSS attrib's of User Input Fields in
a form.

It works fine for text input fields but does not seem to work at all for
TEXTAREAS. (IE6)

Is there a tweak that might overcome this limitation?

Here's the juice:

====================== ext js file =========

sfFocus = function() {
var sfEls = document.getElementsByTagName
("INPUT");

The above line doesn't find elements with tag name "textarea". So the
handlers below are not added to the textareas.

for (var i=0; i<sfEls.length; i++) {
sfEls.onfocus=function() {
this.className+=" sffocus";
}
sfEls.onblur=function() {
this.className=this.className.replace
(new RegExp(" sffocus\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent
("onload", sfFocus);

attachEvent() is for IE. For DOM2 compliant browsers you want
addEventListener()


Peter

Thanks for your feeback, Peter.
I got around the situation by creating a duplicate function (different name)
for TEXTAREAS, obviously substituting TEXTAREA for INPUT.

I tried applying this to a 3rd form element, Radio button groups, but this
logic doesn't seem to work here. Where ("INPUT") governs simple text input
fields, ("RADIO") will not work for Radio groups. I'm working with two
radio groups, one a 2-element group and one a 4-element group.

any help with choosing the right descriptor for this type of form element
would be appreciated...