onFocus problema

Discussion in 'Javascript' started by leodippolito@gmail.com, May 2, 2005.

  1. Guest

    Hello,

    I have an input element with an onfocus event handler that is
    responsible for changing its value:

    ---
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    <script>
    function doSomething(objSender)
    {
    objSender.value = 'abc';
    }
    </script>
    </head>
    <body>
    <INPUT id="input1" type="text"><br>
    <INPUT id="input2" type="text"
    onfocus="doSomething(this);"><br>
    <INPUT id="input3" type="text">
    </body>
    </html>
    ---

    The problem is:

    I am in input1 and press the TAB key to navigate to input2. At this
    moment, if input2 is empty, it will change for 'abc' and will receive
    the focus (the cursor will be there). So far so good.

    However, if input2 is not empty, after pressing the TAB key, input2
    will change for 'abc' and WILL NOT RECEIVE THE FOCUS!

    Why this behavior? How can I have the focus set in input2, no matter if
    it's empty or not?

    I appreciate any help.

    Leonardo D'Ippolito
     
    , May 2, 2005
    #1
    1. Advertising

  2. Jerome Bei Guest

    Hi,

    Seems like the object gets the focus directly after the onfocus event
    fires, and after that your method is called, which changes the object value.

    You can try the onfocusin / onfocusout-event or call
    objSender.select(); after changing the object value.

    --Jerome
     
    Jerome Bei, May 2, 2005
    #2
    1. Advertising

  3. Guest

    I am not having that problem but, to be safe, you could modify your
    function to set focus to the object being passed in:

    function doSomething(objSender) {
    objSender.value = 'abc';
    objSender.focus();
    }

    Hope that helps...



    wrote:
    > Hello,
    >
    > I have an input element with an onfocus event handler that is
    > responsible for changing its value:
    >
    > ---
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    > <html>
    > <head>
    > <title></title>
    > <script>
    > function doSomething(objSender)
    > {
    > objSender.value = 'abc';
    > }
    > </script>
    > </head>
    > <body>
    > <INPUT id="input1" type="text"><br>
    > <INPUT id="input2" type="text"
    > onfocus="doSomething(this);"><br>
    > <INPUT id="input3" type="text">
    > </body>
    > </html>
    > ---
    >
    > The problem is:
    >
    > I am in input1 and press the TAB key to navigate to input2. At this
    > moment, if input2 is empty, it will change for 'abc' and will receive
    > the focus (the cursor will be there). So far so good.
    >
    > However, if input2 is not empty, after pressing the TAB key, input2
    > will change for 'abc' and WILL NOT RECEIVE THE FOCUS!
    >
    > Why this behavior? How can I have the focus set in input2, no matter

    if
    > it's empty or not?
    >
    > I appreciate any help.
    >
    > Leonardo D'Ippolito
     
    , May 2, 2005
    #3
  4. Jerome Bei Guest

    wrote:
    > I am not having that problem but, to be safe, you could modify your
    > function to set focus to the object being passed in:
    >
    > function doSomething(objSender) {
    > objSender.value = 'abc';
    > objSender.focus();
    > }
    >
    > Hope that helps...


    I have tried that out, it doesn't seem to work. In fact, the object
    *has* the focus, only because the object value is changed afterwards,
    you don't see the cursor anymore. (Just try to type some additional text
    into the second input field after switching with tab).

    (Tested with IE6)

    --Jerome
     
    Jerome Bei, May 2, 2005
    #4
  5. Guest

    Jerome, acg, thanks for the answers.

    The best workaround I found for this was:

    ---
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    <script>
    function setCaretToEnd (control)
    {
    if (control.createTextRange) {
    var range = control.createTextRange();
    range.collapse(false);
    range.select();
    }
    else if (control.setSelectionRange) {

    control.focus();
    var len = control.value.length;
    control.setSelectionRange(len,len);
    }
    }

    function doSomething(objSender)
    {
    objSender.value = 'abc';
    setCaretToEnd(objSender);
    }
    </script>
    </head>
    <body>
    <INPUT id="input1" type="text" NAME="input1"><br>
    <INPUT id="input2" type="text" onfocus="doSomething(this);"
    NAME="input2"><br>
    <INPUT id="input3" type="text" NAME="input3">
    </body>
    </html>
    ---

    Which works in IE but doesn't work very well in Mozilla. In Mozilla
    it leaves a selection in input2.

    Does anyone have an alternative to solve this problem?

    Thanks!
     
    , May 2, 2005
    #5
  6. Jerome Bei wrote:

    > You can try the onfocusin / onfocusout-event [...]


    Micro$oft forgot their usual MSDN Library statement there:

    | There is no public standard that applies to this $foo.

    Using onfocusin/onfocusout attributes creates invalid HTML
    and the respective DOM object properties are IE only.

    <http://www.w3.org/TR/html4/>
    <http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings>

    There is a DOMFocusIn event defined in DOM Level 3 Events, however that
    specification is still a Working Draft and definitions therein would apply
    to DOM object properties only (so no onfocusin/onfocusout attributes in
    non-extensible/extended markup languages):

    <http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTypes-complete>


    PointedEars
     
    Thomas 'PointedEars' Lahn, May 12, 2005
    #6
  7. Grant Wagner Guest

    <> wrote in message
    news:...
    > Hello,
    >
    > I have an input element with an onfocus event handler that is
    > responsible for changing its value:
    >
    > ---
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    > <html>
    > <head>
    > <title></title>
    > <script>
    > function doSomething(objSender)
    > {
    > objSender.value = 'abc';
    > }
    > </script>
    > </head>
    > <body>
    > <INPUT id="input1" type="text"><br>
    > <INPUT id="input2" type="text"
    > onfocus="doSomething(this);"><br>
    > <INPUT id="input3" type="text">
    > </body>
    > </html>
    > ---
    >
    > The problem is:
    >
    > I am in input1 and press the TAB key to navigate to input2. At this
    > moment, if input2 is empty, it will change for 'abc' and will receive
    > the focus (the cursor will be there). So far so good.
    >
    > However, if input2 is not empty, after pressing the TAB key, input2
    > will change for 'abc' and WILL NOT RECEIVE THE FOCUS!
    >
    > Why this behavior? How can I have the focus set in input2, no matter
    > if
    > it's empty or not?
    >
    > I appreciate any help.
    >
    > Leonardo D'Ippolito


    function doSomething(objSender)
    {
    objSender.value = 'abc';
    if (objSender.createTextRange)
    {
    // added functionality, places the cursor at the
    // end of any text in the input in IE or any other
    // user agent that supports createTextRange(),
    // TextRange#moveStart() and TextRange#select()
    var r = objSender.createTextRange();
    if (r.moveStart)
    {
    r.moveStart('character', objSender.value.length);
    if (r.select)
    {
    r.select();
    }
    }
    }
    // fixes your initial problem, guarantees the input you
    // just set the value of retains focus; may not be
    // necessary - testing without seems to place focus
    // on input by default with above code
    objSender.focus();
    }

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, May 12, 2005
    #7
    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. Juan

    Problema de ConfiguraciĆ³n!

    Juan, Mar 3, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    1,514
    Carlos Campos
    Mar 3, 2004
  2. Jose Joaquin de Haro

    Problema con archivos dbx

    Jose Joaquin de Haro, Jan 28, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    1,584
    Lionel LASKE
    Jan 28, 2005
  3. Fabio Cirillo

    problema con vb net e system.net.socket

    Fabio Cirillo, Mar 29, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    665
    Fabio Cirillo
    Mar 29, 2005
  4. [XaToA]
    Replies:
    1
    Views:
    2,444
    TT \(Tom Tempelaere\)
    Feb 29, 2004
  5. Replies:
    1
    Views:
    638
Loading...

Share This Page