Input Field Focus ()

Discussion in 'Javascript' started by FormLess, Apr 27, 2007.

  1. FormLess

    FormLess Guest

    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.
     
    FormLess, Apr 27, 2007
    #1
    1. Advertising

  2. On Apr 26, 8:07 pm, "FormLess" <> wrote:
    > 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
     
    Peter Michaux, Apr 27, 2007
    #2
    1. Advertising

  3. FormLess

    FormLess Guest

    "Peter Michaux" <> wrote in message
    news:...
    > On Apr 26, 8:07 pm, "FormLess" <> wrote:
    > > 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...
     
    FormLess, Apr 29, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Adrian Parker

    Input field focus after postback - v1.1

    Adrian Parker, Mar 10, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    473
    Steven Cheng[MSFT]
    Mar 10, 2006
  2. =?ISO-8859-15?Q?Josef_Bl=F6sl?=
    Replies:
    1
    Views:
    25,882
  3. leiko

    focus on a input field

    leiko, Feb 25, 2004, in forum: Javascript
    Replies:
    3
    Views:
    127
    McKirahan
    Feb 26, 2004
  4. Rune Runnestø
    Replies:
    4
    Views:
    183
    Thomas 'PointedEars' Lahn
    May 8, 2005
  5. Roger
    Replies:
    3
    Views:
    336
Loading...

Share This Page