focus() & select() not working


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 8 of 8

Thread: focus() & select() not working

Hybrid View

  1. #1
    Craig Guest

    focus() & select() not working

    Hi

    I have some code that validates a field. The code is called using the
    onchange event for the input field. The code is;

    function CheckDate(ObjectName)
    { if(!isDate(ObjectName))
    { msg = 'Date is not valid.';
    alert(msg);
    ObjectName.select();
    ObjectName.focus();
    }
    }

    The select() and focus() are not working. I suspect the problem is the
    order of events. If I enter invalid data and press TAB, the warning
    appears, but the cursor moves to the next field. I think the select() and
    focus() may be working, but the key press (the TAB) is executed after the
    script, so the focus moves to the next field. If I use the onblur event
    instead of the onchange event, the code works. I'm guessing this is becuase
    the onblur happens after the key press is executed. I can't use the onblur
    event for other reasons. Is there anyway to get the onchange event working
    with validation code that moves the focus?

    Thanks for your help.



  2. #2
    Frederiek Guest

    Re: focus() & select() not working


    Hi Craig,

    Have you tried to set the focus() first and then the select()?
    Try, and if it doesn't work, post the URL of a sample page.

    BTW, in which browser/platform have you checked?

    cya
    Frederiek

  3. #3
    Craig Guest

    Re: focus() & select() not working

    Yes, I've tried changing the order of the focus() and select() commands, but
    get the same result. It only seems to happen if the next object is a text
    box.

    I'm using IIS4 as the web server and the application is for IE4+ only.
    Unfortunately I can't post a test site, as I'm working for a client who is
    behind a firewall (I don't have permissions to make changes to their
    external web server).

    Let me know if you would like me to post a small HTML page here that gives
    an example of the problem.

    Thanks a lot for your help.

    "Frederiek" <fourwaysstreet@chello.be> wrote in message
    news:3a114a3e$1@news.devx.com...
    >
    > Hi Craig,
    >
    > Have you tried to set the focus() first and then the select()?
    > Try, and if it doesn't work, post the URL of a sample page.
    >
    > BTW, in which browser/platform have you checked?
    >
    > cya
    > Frederiek




  4. #4
    Glenn Guest

    Re: focus() & select() not working


    Craig,

    I'm not sure if this is supported in IE4, but it is in IE5, but try using
    the window.setTimeout method to set the focus back on your control. If it's
    true that the blur caused by the tab key is being fired after your Focus
    method, this solution would seem to work.

    So it's something like this (I'm basically a vbScript dude, not a lot of
    JavaScript experience, so the syntax might need some work):

    function CheckDate(ObjectName)
    { if(!isDate(ObjectName))
    { msg = 'Date is not valid.';
    alert(msg);
    window.setTimeout ('FocusOnControl ObjectName', 1)
    }
    }
    function FocusOnControl(ObjectName)
    { ObjectName.select();
    ObjectName.focus();
    }

    The "1" represents the time, in milliseconds, that the browser should wait
    before performing the operation.

    Note also that you may have to move your alert from the CheckDate function
    to the FocusOnControl function, don't know.

    "Craig" <cjewiss@nospam.hotmail.com> wrote:
    >Hi
    >
    >I have some code that validates a field. The code is called using the
    >onchange event for the input field. The code is;
    >
    >function CheckDate(ObjectName)
    >{ if(!isDate(ObjectName))
    > { msg = 'Date is not valid.';
    > alert(msg);
    > ObjectName.select();
    > ObjectName.focus();
    > }
    >}
    >
    >The select() and focus() are not working. I suspect the problem is the
    >order of events. If I enter invalid data and press TAB, the warning
    >appears, but the cursor moves to the next field. I think the select() and
    >focus() may be working, but the key press (the TAB) is executed after the
    >script, so the focus moves to the next field. If I use the onblur event
    >instead of the onchange event, the code works. I'm guessing this is becuase
    >the onblur happens after the key press is executed. I can't use the onblur
    >event for other reasons. Is there anyway to get the onchange event working
    >with validation code that moves the focus?
    >
    >Thanks for your help.
    >
    >



  5. #5
    Frederiek Guest

    Re: focus() & select() not working


    I don't know about any IIS4 server. And I wonder why you would want to make
    an application for IE only.

    The following is a simple test page I made, with only one field. Type anything
    *but* the "@" sign in the field.

    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" language="Javascript">
    <!--
    function CheckDate(ObjectName) {
    if (!check_email(ObjectName.value)) {//
    msg = 'Date is not valid.';
    alert(msg);
    ObjectName.focus();
    ObjectName.select();
    return false;
    }
    return true;
    }

    function check_email(address) {
    if (address.indexOf ('@') == -1)
    return false;
    return true;
    }
    //-->
    </script>
    </head>
    <body>
    <form name="form" action="mailto:" method="post" enctype="text/plain" onsubmit="return
    CheckDate(document.form.MAIL)">
    <input name="MAIL" value=""><br>
    <input type="submit" name="submit" value="send">
    </form>
    </body>
    </html>

    Works in both NS 4.75 and IE 5.0 on Mac (I don't have a PC).
    Surely you call upon the ObjectName differently, having several more checks
    in the function. But this was just about getting the select() and focus()
    to work.

    If this doesn't help, then post the code of a sample page.

    cya
    Frederiek


    "Craig" <cjewiss@nospam.hotmail.com> wrote:
    >Yes, I've tried changing the order of the focus() and select() commands,

    but
    >get the same result. It only seems to happen if the next object is a text
    >box.
    >
    >I'm using IIS4 as the web server and the application is for IE4+ only.
    >Unfortunately I can't post a test site, as I'm working for a client who

    is
    >behind a firewall (I don't have permissions to make changes to their
    >external web server).
    >
    >Let me know if you would like me to post a small HTML page here that gives
    >an example of the problem.
    >
    >Thanks a lot for your help.




  6. #6
    Craig Guest

    Re: focus() & select() not working

    My problem only occurs if there's a text input directly after the field I'm
    testing. Here's some sample code that exhibits the problem on my server
    (ps. this is an IE only application because it's for an Intranet where the
    company has standardised on IE4+);

    <HTML>
    <HEAD>
    <TITLE>Test</TITLE>
    <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
    <!--

    function text1_onchange()
    {
    if (document.test.text1.value != '@')
    {
    alert('Invalid value.');
    document.test.text1.focus();
    document.test.text1.select();
    }
    }

    function text2_onchange()
    {
    if (document.test.text2.value != '@')
    {
    alert('Invalid value.');
    document.test.text2.select();
    document.test.text2.focus();
    }
    }

    //-->
    </SCRIPT>
    </HEAD>
    <BODY>


    <form name=test method=post action="dosomething.asp">

    <TABLE border=1 cellPadding=1 cellSpacing=1>

    <TR>
    <TD>First Field:</TD>
    <TD><INPUT id=text1 name=text1 LANGUAGE=javascript onchange="return
    text1_onchange()"></TD></TR>
    <TR>
    <TD>Second Field:</TD>
    <TD><INPUT id=text2 name=text2 LANGUAGE=javascript onchange="return
    text2_onchange()"></TD></TR>
    <TR>
    <TD>Third Field:</TD>
    <TD><INPUT id=text3 name=text3></TD></TR>
    <TR>
    <TD></TD>
    <TD><INPUT id=submit1 name=submit1 type=submit value=Submit></TD></TR>

    </TABLE>

    </form>

    </BODY>
    </HTML>
    "Frederiek" <fourwaysstreet@chello.be> wrote in message
    news:3a150f37$1@news.devx.com...
    >
    > I don't know about any IIS4 server. And I wonder why you would want to

    make
    > an application for IE only.
    >
    > The following is a simple test page I made, with only one field. Type

    anything
    > *but* the "@" sign in the field.
    >
    > <html>
    > <head>
    > <title>Test</title>
    > <script type="text/javascript" language="Javascript">
    > <!--
    > function CheckDate(ObjectName) {
    > if (!check_email(ObjectName.value)) {//
    > msg = 'Date is not valid.';
    > alert(msg);
    > ObjectName.focus();
    > ObjectName.select();
    > return false;
    > }
    > return true;
    > }
    >
    > function check_email(address) {
    > if (address.indexOf ('@') == -1)
    > return false;
    > return true;
    > }
    > //-->
    > </script>
    > </head>
    > <body>
    > <form name="form" action="mailto:" method="post" enctype="text/plain"

    onsubmit="return
    > CheckDate(document.form.MAIL)">
    > <input name="MAIL" value=""><br>
    > <input type="submit" name="submit" value="send">
    > </form>
    > </body>
    > </html>
    >
    > Works in both NS 4.75 and IE 5.0 on Mac (I don't have a PC).
    > Surely you call upon the ObjectName differently, having several more

    checks
    > in the function. But this was just about getting the select() and focus()
    > to work.
    >
    > If this doesn't help, then post the code of a sample page.
    >
    > cya
    > Frederiek
    >
    >
    > "Craig" <cjewiss@nospam.hotmail.com> wrote:
    > >Yes, I've tried changing the order of the focus() and select() commands,

    > but
    > >get the same result. It only seems to happen if the next object is a

    text
    > >box.
    > >
    > >I'm using IIS4 as the web server and the application is for IE4+ only.
    > >Unfortunately I can't post a test site, as I'm working for a client who

    > is
    > >behind a firewall (I don't have permissions to make changes to their
    > >external web server).
    > >
    > >Let me know if you would like me to post a small HTML page here that

    gives
    > >an example of the problem.
    > >
    > >Thanks a lot for your help.

    >
    >




  7. #7
    Frederiek Guest

    Re: focus() & select() not working


    Your script worked perfectly well in IE 5.0 on Mac. I don't have IE 4 anymore,
    as on installing IE 5, extensions get overwritten, so IE 4 would use the
    libraries of IE 5, which wouldn't be a correct test. And I don't have a PC.
    I put something in the third field first, then in the second field and the
    alert did fire and the select occurred. The same goes for starting off in
    the second field first and then the first field.

    The only thing is that, after the alert I am able to pick another field without
    the alert firing again. Surely that's not what you're after; the field *has*
    to be valid before being able to continue (right?). In that case, I'd change
    the "onchange=..." into "onblur=...". Cause if you then try to continue anyway,
    the alert will be fired each time you try.

    <INPUT id="text1" name="text1" onblur="return text1_onchange()">

    BTW, I don't quite see what "LANGUAGE=javascript" has to do in the following
    line:
    <INPUT id=text1 name=text1 LANGUAGE=javascript onchange="return text1_onchange()">,
    nor the script id in the starting script tag.
    And I'd quote the attribute values, as in the next HTML versions (XML) they
    are required.

    cya
    Frederiek

    "Craig" <cjewiss@nospam.hotmail.com> wrote:
    >My problem only occurs if there's a text input directly after the field

    I'm
    >testing. Here's some sample code that exhibits the problem on my server
    >(ps. this is an IE only application because it's for an Intranet where the
    >company has standardised on IE4+);
    >
    > ...


  8. #8
    Paul Gabriel Guest

    Re: focus() & select() not working


    The problem is with the logic. When the use moves from text1 to text2 and
    text1 is invalid, your script takes the user back to text1. This by itself
    is fine. However, your script caused the focus to leave text2 which isn't
    valid (yet) which fires that event. The user can't fix both at the same time
    and the script is running both checks simultaneously. (This doesnt happen
    on the Mac since it is single tasking)

    I seem to remember something about a deadlock from back in school...

    The answer is to either call one validation script for the whole form on
    submit, or chain you logic so as to prevent this deadlock.

    hope this helps.

    Paul

    "Craig" <cjewiss@nospam.hotmail.com> wrote:
    >My problem only occurs if there's a text input directly after the field

    I'm
    >testing. Here's some sample code that exhibits the problem on my server
    >(ps. this is an IE only application because it's for an Intranet where the
    >company has standardised on IE4+);
    >
    ><HTML>
    ><HEAD>
    ><TITLE>Test</TITLE>
    ><SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
    ><!--
    >
    >function text1_onchange()
    >{
    > if (document.test.text1.value != '@')
    > {
    > alert('Invalid value.');
    > document.test.text1.focus();
    > document.test.text1.select();
    > }
    >}
    >
    >function text2_onchange()
    >{
    > if (document.test.text2.value != '@')
    > {
    > alert('Invalid value.');
    > document.test.text2.select();
    > document.test.text2.focus();
    > }
    >}
    >
    >//-->
    ></SCRIPT>
    ></HEAD>
    ><BODY>
    >
    >
    ><form name=test method=post action="dosomething.asp">
    >
    ><TABLE border=1 cellPadding=1 cellSpacing=1>
    >
    > <TR>
    > <TD>First Field:</TD>
    > <TD><INPUT id=text1 name=text1 LANGUAGE=javascript onchange="return
    >text1_onchange()"></TD></TR>
    > <TR>
    > <TD>Second Field:</TD>
    > <TD><INPUT id=text2 name=text2 LANGUAGE=javascript onchange="return
    >text2_onchange()"></TD></TR>
    > <TR>
    > <TD>Third Field:</TD>
    > <TD><INPUT id=text3 name=text3></TD></TR>
    > <TR>
    > <TD></TD>
    > <TD><INPUT id=submit1 name=submit1 type=submit value=Submit></TD></TR>
    >
    ></TABLE>
    >
    ></form>
    >
    ></BODY>
    ></HTML>
    >"Frederiek" <fourwaysstreet@chello.be> wrote in message
    >news:3a150f37$1@news.devx.com...
    >>
    >> I don't know about any IIS4 server. And I wonder why you would want to

    >make
    >> an application for IE only.
    >>
    >> The following is a simple test page I made, with only one field. Type

    >anything
    >> *but* the "@" sign in the field.
    >>
    >> <html>
    >> <head>
    >> <title>Test</title>
    >> <script type="text/javascript" language="Javascript">
    >> <!--
    >> function CheckDate(ObjectName) {
    >> if (!check_email(ObjectName.value)) {//
    >> msg = 'Date is not valid.';
    >> alert(msg);
    >> ObjectName.focus();
    >> ObjectName.select();
    >> return false;
    >> }
    >> return true;
    >> }
    >>
    >> function check_email(address) {
    >> if (address.indexOf ('@') == -1)
    >> return false;
    >> return true;
    >> }
    >> //-->
    >> </script>
    >> </head>
    >> <body>
    >> <form name="form" action="mailto:" method="post" enctype="text/plain"

    >onsubmit="return
    >> CheckDate(document.form.MAIL)">
    >> <input name="MAIL" value=""><br>
    >> <input type="submit" name="submit" value="send">
    >> </form>
    >> </body>
    >> </html>
    >>
    >> Works in both NS 4.75 and IE 5.0 on Mac (I don't have a PC).
    >> Surely you call upon the ObjectName differently, having several more

    >checks
    >> in the function. But this was just about getting the select() and focus()
    >> to work.
    >>
    >> If this doesn't help, then post the code of a sample page.
    >>
    >> cya
    >> Frederiek
    >>
    >>
    >> "Craig" <cjewiss@nospam.hotmail.com> wrote:
    >> >Yes, I've tried changing the order of the focus() and select() commands,

    >> but
    >> >get the same result. It only seems to happen if the next object is a

    >text
    >> >box.
    >> >
    >> >I'm using IIS4 as the web server and the application is for IE4+ only.
    >> >Unfortunately I can't post a test site, as I'm working for a client who

    >> is
    >> >behind a firewall (I don't have permissions to make changes to their
    >> >external web server).
    >> >
    >> >Let me know if you would like me to post a small HTML page here that

    >gives
    >> >an example of the problem.
    >> >
    >> >Thanks a lot for your help.

    >>
    >>

    >
    >



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center