Showing focus

Discussion in 'HTML' started by sheldonlg, Mar 18, 2008.

  1. sheldonlg

    sheldonlg Guest

    I have a problem with not seeing the current focus while in a particular
    screen in a my app. The focus does not show for a type=text or
    textarea. I have tried to reproduce this problem in a test application,
    but have not been successful is doing that.

    The actual app has a screen which is displayed on a template and the
    contents are the return from an AJAX call. In that content there is a
    hidden block. Clicking on a button in the displayed area causes that
    hidden block to appear (with a gray background in a fixed location on
    the screen). It is in that area that I have both text fields and text
    areas. I also have dropdown lists and buttons. Only the text areas and
    text fields do not display focus when there, but I can type into them so
    I know that focus is there.

    For my test app I copied the CSS file that I had been using and placed
    my content within the same two named <div>s where the actual content
    appears on the template. With this test app there is no problem. The
    test app is at www.sheldonlg.com/multipleselection/multiples5.php.

    I don't even know where to start looking for the problem. I did a
    search in Google for "ht ml showfocus", but that wasn't much help.

    Any suggestions?

    (crossposted in comp.lang.javascript and alt.html)
    sheldonlg, Mar 18, 2008
    #1
    1. Advertising

  2. Jonathan N. Little, Mar 18, 2008
    #2
    1. Advertising

  3. sheldonlg

    sheldonlg Guest

    sheldonlg, Mar 18, 2008
    #3
  4. sheldonlg

    SAM Guest

    sheldonlg a écrit :
    > I have a problem with not seeing the current focus while in a particular
    > screen in a my app. The focus does not show for a type=text or
    > textarea. I have tried to reproduce this problem in a test application,
    > but have not been successful is doing that.
    >
    > The actual app has a screen which is displayed on a template and the
    > contents are the return from an AJAX call. In that content there is a
    > hidden block. Clicking on a button in the displayed area causes that
    > hidden block to appear (with a gray background in a fixed location on
    > the screen). It is in that area that I have both text fields and text
    > areas. I also have dropdown lists and buttons. Only the text areas and
    > text fields do not display focus when there, but I can type into them so
    > I know that focus is there.


    CSS (for others than IE) :

    input { background: silver }
    input:focus { background: white }

    HTML :

    <input onfocus="if(IE) this.background='white';"
    onblur="if(IE) this.background='';"
    id="hiddenInput" name="Name">

    JS :

    IE = false; /*@cc_on IE=true; @*/



    is your div styled visibity: hidden; or display: none; ?

    is your div in same form that the form in rear when this div comes at
    front ?

    does that happens also with Firefox ?


    --
    sm
    SAM, Mar 18, 2008
    #4
  5. sheldonlg

    sheldonlg Guest

    SAM wrote:
    > sheldonlg a écrit :
    >> I have a problem with not seeing the current focus while in a
    >> particular screen in a my app. The focus does not show for a
    >> type=text or textarea. I have tried to reproduce this problem in a
    >> test application, but have not been successful is doing that.
    >>
    >> The actual app has a screen which is displayed on a template and the
    >> contents are the return from an AJAX call. In that content there is a
    >> hidden block. Clicking on a button in the displayed area causes that
    >> hidden block to appear (with a gray background in a fixed location on
    >> the screen). It is in that area that I have both text fields and text
    >> areas. I also have dropdown lists and buttons. Only the text areas
    >> and text fields do not display focus when there, but I can type into
    >> them so I know that focus is there.

    >
    > CSS (for others than IE) :
    >
    > input { background: silver }
    > input:focus { background: white }
    >
    > HTML :
    >
    > <input onfocus="if(IE) this.background='white';"
    > onblur="if(IE) this.background='';"
    > id="hiddenInput" name="Name">
    >
    > JS :
    >
    > IE = false; /*@cc_on IE=true; @*/
    >


    I'll try this

    >
    >
    > is your div styled visibity: hidden; or display: none; ?


    It is initially styled visibity: hidden; When an action is clicked
    that needs to display it, that javascript changes the style to
    visibility:visible with editBlock.style.visibility = "visible";

    >
    > is your div in same form that the form in rear when this div comes at
    > front ?


    No, a form was not needed for the complete screen since there is no
    submittal anywhere. It is all with AJAX. This, though, is in its own
    form in order to use the multiple selection stuff.
    >
    > does that happens also with Firefox ?


    I haven't even done IE. I do all my development first on Firefox
    because of its tremendous developer tools.
    sheldonlg, Mar 18, 2008
    #5
  6. sheldonlg

    Guest

    On Mar 18, 6:02 pm, sheldonlg <sheldonlg> wrote:
    > > is your div styled visibity: hidden; or display: none; ?

    >
    > It is initially styled visibity: hidden; When an action is clicked
    > that needs to display it, that javascript changes the style to
    > visibility:visible with editBlock.style.visibility = "visible";
    >
    > > is your div in same form that the form in rear when this div comes at
    > > front ?

    >
    > No, a form was not needed for the complete screen since there is no
    > submittal anywhere. It is all with AJAX. This, though, is in its own
    > form in order to use the multiple selection stuff.
    >
    > > does that happens also with Firefox ?

    >
    > I haven't even done IE. I do all my development first on Firefox
    > because of its tremendous developer tools.


    Can you give an exact example,
    what you type, what buttons you click
    and what should happen, what should appear where, etc.
    , Mar 18, 2008
    #6
  7. sheldonlg

    SAM Guest

    SAM, Mar 18, 2008
    #7
  8. sheldonlg

    sheldonlg Guest

    wrote:
    > On Mar 18, 6:02 pm, sheldonlg <sheldonlg> wrote:
    >>> is your div styled visibity: hidden; or display: none; ?

    >> It is initially styled visibity: hidden; When an action is clicked
    >> that needs to display it, that javascript changes the style to
    >> visibility:visible with editBlock.style.visibility = "visible";
    >>
    >>> is your div in same form that the form in rear when this div comes at
    >>> front ?

    >> No, a form was not needed for the complete screen since there is no
    >> submittal anywhere. It is all with AJAX. This, though, is in its own
    >> form in order to use the multiple selection stuff.
    >>
    >>> does that happens also with Firefox ?

    >> I haven't even done IE. I do all my development first on Firefox
    >> because of its tremendous developer tools.

    >
    > Can you give an exact example,
    > what you type, what buttons you click
    > and what should happen, what should appear where, etc.
    >


    I cannot reproduce the problem on a simple app. I pointed to the simple
    app (that works)
    http://www.sheldonlg.com/multipleselection/multiple5.php. In the actual
    app, something like this is initially hidden. Then when I click on a
    link, I have javascript that makes this appear by changing the
    visibility attribute to visible. At that point I can click into the
    text field and enter data, but I there is no cursor to show that I am
    focussed there. It should be the vertical I-beam.
    sheldonlg, Mar 18, 2008
    #8
  9. sheldonlg

    sheldonlg Guest

    wrote:
    > On Mar 18, 6:02 pm, sheldonlg <sheldonlg> wrote:
    >>> is your div styled visibity: hidden; or display: none; ?

    >> It is initially styled visibity: hidden; When an action is clicked
    >> that needs to display it, that javascript changes the style to
    >> visibility:visible with editBlock.style.visibility = "visible";
    >>
    >>> is your div in same form that the form in rear when this div comes at
    >>> front ?

    >> No, a form was not needed for the complete screen since there is no
    >> submittal anywhere. It is all with AJAX. This, though, is in its own
    >> form in order to use the multiple selection stuff.
    >>
    >>> does that happens also with Firefox ?

    >> I haven't even done IE. I do all my development first on Firefox
    >> because of its tremendous developer tools.

    >
    > Can you give an exact example,
    > what you type, what buttons you click
    > and what should happen, what should appear where, etc.
    >


    I cannot reproduce the problem on a simple app. I pointed to the simple
    app (that works)
    http://www.sheldonlg.com/multipleselection/multiple5.php. In the actual
    app, something like this is initially hidden. Then when I click on a
    link, I have javascript that makes this appear by changing the
    visibility attribute to visible. At that point I can click into the
    text field and enter data, but I there is no cursor to show that I am
    focussed there. It should be the vertical I-beam.
    sheldonlg, Mar 18, 2008
    #9
  10. sheldonlg

    sheldonlg Guest

    wrote:
    > On Mar 18, 6:02 pm, sheldonlg <sheldonlg> wrote:
    >>> is your div styled visibity: hidden; or display: none; ?

    >> It is initially styled visibity: hidden; When an action is clicked
    >> that needs to display it, that javascript changes the style to
    >> visibility:visible with editBlock.style.visibility = "visible";
    >>
    >>> is your div in same form that the form in rear when this div comes at
    >>> front ?

    >> No, a form was not needed for the complete screen since there is no
    >> submittal anywhere. It is all with AJAX. This, though, is in its own
    >> form in order to use the multiple selection stuff.
    >>
    >>> does that happens also with Firefox ?

    >> I haven't even done IE. I do all my development first on Firefox
    >> because of its tremendous developer tools.

    >
    > Can you give an exact example,
    > what you type, what buttons you click
    > and what should happen, what should appear where, etc.
    >


    I cannot reproduce the problem on a simple app. I pointed to the simple
    app (that works)
    http://www.sheldonlg.com/multipleselection/multiple5.php. In the actual
    app, something like this is initially hidden. Then when I click on a
    link, I have javascript that makes this appear by changing the
    visibility attribute to visible. At that point I can click into the
    text field and enter data, but I there is no cursor to show that I am
    focussed there. It should be the vertical I-beam.
    sheldonlg, Mar 18, 2008
    #10
  11. sheldonlg

    sheldonlg Guest

    SAM wrote:
    > sheldonlg a écrit :
    >>>

    >> http://www.sheldonlg.com/multipleselection/multiple5.php

    >
    > Apparently no problem with focus (Fx 2 Mac)
    >


    Correct! This is the sample app and it works. I cannot reproduce the
    problem in a simple app, and I cannot point you to the actual app since
    that is behind firewalls and accessible only via VPN (it is an intranet
    app). If I could reproduce the problem in a simple app, I would be 3/4
    of the way to a solution.
    sheldonlg, Mar 18, 2008
    #11
  12. sheldonlg

    SAM Guest

    sheldonlg a écrit :
    > SAM wrote:
    >>
    >> is your div in same form that the form in rear when this div comes at
    >> front ?

    >
    > No, a form was not needed for the complete screen since there is no
    > submittal anywhere. It is all with AJAX.


    Ajax has nothing to do about correct HTML code ... it does what you ask
    to him.

    > This, though, is in its own
    > form in order to use the multiple selection stuff.


    I asked that because I think IE has some difficulties with forms
    displayed over another element (specialy to focus the front form's
    elements).

    >> does that happens also with Firefox ?

    >
    > I haven't even done IE. I do all my development first on Firefox
    > because of its tremendous developer tools.


    Ha! ? OK .

    All seems to work fine in your example.

    --
    sm
    SAM, Mar 18, 2008
    #12
  13. sheldonlg

    sheldonlg Guest

    SAM wrote:
    > sheldonlg a écrit :
    >> I have a problem with not seeing the current focus while in a
    >> particular screen in a my app. The focus does not show for a
    >> type=text or textarea. I have tried to reproduce this problem in a
    >> test application, but have not been successful is doing that.
    >>
    >> The actual app has a screen which is displayed on a template and the
    >> contents are the return from an AJAX call. In that content there is a
    >> hidden block. Clicking on a button in the displayed area causes that
    >> hidden block to appear (with a gray background in a fixed location on
    >> the screen). It is in that area that I have both text fields and text
    >> areas. I also have dropdown lists and buttons. Only the text areas
    >> and text fields do not display focus when there, but I can type into
    >> them so I know that focus is there.

    >
    > CSS (for others than IE) :
    >
    > input { background: silver }
    > input:focus { background: white }
    >
    > HTML :
    >
    > <input onfocus="if(IE) this.background='white';"
    > onblur="if(IE) this.background='';"
    > id="hiddenInput" name="Name">
    >
    > JS :
    >
    > IE = false; /*@cc_on IE=true; @*/
    >
    >
    >
    > is your div styled visibity: hidden; or display: none; ?
    >
    > is your div in same form that the form in rear when this div comes at
    > front ?
    >
    > does that happens also with Firefox ?
    >
    >


    I tried the CSS stuff. That does what it says, but it doesn't solve my
    problem. Let me more precise.

    When that form comes up, the cursor everywhere is that left-up pointing
    arrow. When the mouse is over a text field or a text area element, the
    cursor changes to a vertical I-beam. However, the blinking vertical
    line does not appear in the text field or the text area if I click on
    them to set focus there. However, focus is set there as I can type in
    information. I want to have that blinking vertical bar on as visual
    feedback as to where the focus is.
    sheldonlg, Mar 18, 2008
    #13
  14. sheldonlg

    Guest

    On Mar 18, 7:14 pm, sheldonlg <sheldonlg> wrote:
    > When that form comes up, the cursor everywhere is that left-up

    pointing
    > arrow. When the mouse is over a text field or a text area element, the
    > cursor changes to a vertical I-beam. However, the blinking vertical
    > line does not appear in the text field or the text area if I click on
    > them to set focus there. However, focus is set there as I can type in
    > information. I want to have that blinking vertical bar on as visual
    > feedback as to where the focus is.


    It is difficult to see what the problem is without an
    exact-ish example.
    Did you try, instead of changing visibility from hidden to visible,
    to change with JavaScript the value of inner.HTML
    , Mar 18, 2008
    #14
  15. sheldonlg

    sheldonlg Guest

    wrote:
    > On Mar 18, 7:14 pm, sheldonlg <sheldonlg> wrote:
    > > When that form comes up, the cursor everywhere is that left-up

    > pointing
    >> arrow. When the mouse is over a text field or a text area element, the
    >> cursor changes to a vertical I-beam. However, the blinking vertical
    >> line does not appear in the text field or the text area if I click on
    >> them to set focus there. However, focus is set there as I can type in
    >> information. I want to have that blinking vertical bar on as visual
    >> feedback as to where the focus is.

    >
    > It is difficult to see what the problem is without an
    > exact-ish example.


    I know. I wish I could reproduce it here.

    > Did you try, instead of changing visibility from hidden to visible,
    > to change with JavaScript the value of inner.HTML


    No, there is much to much to generate to then use an innerHTML setting.
    sheldonlg, Mar 18, 2008
    #15
  16. sheldonlg

    Guest

    On Mar 18, 7:57 pm, sheldonlg <sheldonlg> wrote:
    >
    > > It is difficult to see what the problem is without an
    > > exact-ish example.

    >
    > I know. I wish I could reproduce it here.
    >
    > > Did you try, instead of changing visibility from hidden to visible,
    > > to change with JavaScript the value of inner.HTML

    >
    > No, there is much to much to generate to then use an innerHTML setting.


    Just to state the obvious:
    check for error messages in the Firefox error console,
    check valid HTML, CSS etc.
    I see that you use in your example tables in the form.
    Maybe try the form without tables, just in case,
    sometimes tables in forms can create problems.
    , Mar 18, 2008
    #16
  17. sheldonlg

    SAM Guest

    sheldonlg a écrit :
    >
    > No, there is much to much to generate to then use an innerHTML setting.


    With your last test : Oll Korrect with Fx (mouse's pointer over fields)

    Next test with a form in rear ?

    --
    sm
    SAM, Mar 19, 2008
    #17
  18. sheldonlg

    SAM Guest

    sheldonlg a écrit :
    >
    > I tried the CSS stuff. That does what it says, but it doesn't solve my
    > problem. Let me more precise.
    >
    > When that form comes up, the cursor everywhere is that left-up pointing
    > arrow. When the mouse is over a text field or a text area element, the
    > cursor changes to a vertical I-beam.


    input:hover, textarea:hover { cursor: text }

    #dimensions input:hover[type=text] { cursor: text }
    #dimensions input:focus[type=text] { cursor: wait }

    <http://www.w3.org/TR/CSS21/ui.html#propdef-cursor>

    > However, the blinking vertical
    > line does not appear in the text field or the text area if I click on
    > them to set focus there.


    I have no solution for that.
    Overall I can't get this not blinking cursor

    --
    sm
    SAM, Mar 19, 2008
    #18
    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. Ray Booysen
    Replies:
    2
    Views:
    645
    Ray Booysen
    Mar 28, 2006
  2. Chris F.A. Johnson

    Re: Focus not showing

    Chris F.A. Johnson, Sep 17, 2008, in forum: HTML
    Replies:
    0
    Views:
    377
    Chris F.A. Johnson
    Sep 17, 2008
  3. dorayme

    Re: Focus not showing

    dorayme, Sep 18, 2008, in forum: HTML
    Replies:
    4
    Views:
    440
    Sherm Pendley
    Sep 18, 2008
  4. Martin

    Set focus after showing an alert?

    Martin, Sep 3, 2004, in forum: Javascript
    Replies:
    5
    Views:
    110
    Randy Webb
    Sep 5, 2004
  5. Roger
    Replies:
    3
    Views:
    322
Loading...

Share This Page