another newbie question focus()

Discussion in 'Javascript' started by please-answer-here, Jun 21, 2005.

  1. Why doesn't this script works?

    I've tried different variant with focus 2 fields ahead or back which works
    fine. But when I try to focus on the field I've just left I'm unable to
    "refocus" on that field. My guess is that the combination of onchange and
    focus() causes the problem, but I haven't got the big experience and
    knowledge to wheter my assumption is right or if I just made a big blunder
    somewhere.

    Again I'll hope that someone could spare a few minutes in increasing my
    (little) knowledge in javascript and DOM


    <html>
    <head>
    <title>just a silly little test</title>
    <script>
    function validate(that) {
    var xid=that.id;
    var yid=that.form.id;
    var xantelm=that.form.elements.length;
    for (i=0;i<xantelm;i++) {
    if (document.forms[yid].elements.id == xid) {
    if (that.value.length!=3) {
    alert('Exactly 3 characters are needed');
    document.forms[yid].elements.focus();
    }
    }
    }
    return true;
    }

    </script>
    </head>
    <body>
    <form id="forma" action="sletmig.asp" method="post">
    <input id="fielda" type="text" onchange="validate(this);">
    <input id="fieldb" type="text" onchange="validate(this);">
    <input id="fieldc" type="text" onchange="validate(this);">
    </form>
    </body>
     
    please-answer-here, Jun 21, 2005
    #1
    1. Advertisements

  2. please-answer-here

    web.dev Guest

    Hi,

    I've tried the following in IE and it works. Change your javascript to
    be like so:

    <script type = "text/javascript">
    function validate(that)
    {
    if(that.value.length != 3)
    {
    alert("3 chars needed");
    that.focus();
    }
    }
    </script>

    Your other checks aren't necessary. Your current <input> element
    passes to the function "this". And that's all your function needs to
    know for what you want to do. The moment you try to do this bit of
    code:

    .... that.form ...

    Won't work, simply because the <input> element doesn't have the form
    property. However, document.forms[x] would make more sense. I hope
    this clarifies.

    :)
     
    web.dev, Jun 21, 2005
    #2
    1. Advertisements

  3. Don't work (at least in my environment)
    But It actually works without any problems when focusing on i+1 or i-1
    (exept of course when out of range)
    , and that.form.id is just the id of the form

    However, document.forms[x] would make more sense. I hope
     
    please-answer-here, Jun 21, 2005
    #3
  4. please-answer-here

    Dave Guest

    I think you're being bitten by an order of operations problem. The
    hitting the tab key causes the onchange event to fire first before the
    tab key is actually acted on. In your handling of the onchange event
    you change the focus.

    When the event returns, the tab is dealt with, moving the focus down the
    tab order, and overwriting your setting of the focus.

    You need to fix it so your focus happens after the tab key is processed.

    I have an updated version below that seems to work but I'd be interested
    in seeing any other solutions that are offered.



    <html>
    <head>
    <title>just a silly little test</title>
    <script>
    var focus_ctl;
    function validate_focus(){
    focus_ctl.focus();
    }

    function validate(that) {
    focus_ctl=that;
    if (that.value.length!=3) {
    alert('Exactly 3 characters are needed');
    setTimeout(validate_focus,50);
    }
    }

    </script>
    </head>
    <body>
    <form id="forma" action="sletmig.asp" method="post">
    <input id="fielda" type="text" onchange="validate(this);">
    <input id="fieldb" type="text" onchange="validate(this);">
    <input id="fieldc" type="text" onchange="validate(this);">
    </form>
    </body>
     
    Dave, Jun 21, 2005
    #4
  5. Think I found a part of the solution. Apparently I need to place the focus
    in a settimeout call. When using "fixed" text it works very vell , but how
    do I escape/evaluate the variables in the
    document.forms[yid].elements.focus(); expression when placed into the
    settimeout call?
     
    please-answer-here, Jun 21, 2005
    #5
  6. please-answer-here

    RobG Guest

    Yes it does. Controls have a 'form' property that is the parent form,
    which is why 'this.form' works. Try it.

    <form name="aForm" action="">
    <input type="button" value="click me" onclick="
    var x = this.form.textField;
    alert(this.form.name + '\n' + x.form.name);
    ">
    <input type="text" name="textField">
    </form>
     
    RobG, Jun 21, 2005
    #6
  7. I think I understand the key concepts, but how do I literally pass/assign
    the actual value to the focus_ctl variable from the validate function?
     
    please-answer-here, Jun 21, 2005
    #7
  8. please-answer-here

    RobG Guest



    By building them up as a string:

    function validate(that) {
    if (that.value.length!=3) {
    alert('Exactly 3 characters are needed');
    var t = "document." + that.form.name + '.' + that.id;
    setTimeout( t + ".focus();", 50);
    }
    }

    The variable 't' is not strictly necessary, but the line gets pretty
    long otherwise.

    The use of dot notation for accessing forms only works in IE if the
    form has a matching name (it works with an ID in other Geko browsers),
    so add a name to the form that matches the ID.

    It may be a good idea to do the same for the form elements too.

    [...]
     
    RobG, Jun 21, 2005
    #8
  9. please-answer-here

    RobG Guest

    focus_ctl is being created as a global variable (it is declared inside
    a function without the 'var' keyword), it holds a reference to the
    element referenced by 'that'.

    [...]
    ^^^^^---- created here without 'var'.

    [...]
     
    RobG, Jun 21, 2005
    #9


  10. Thank you very much for the solution. Now it works and I'm a happy man

     
    please-answer-here, Jun 22, 2005
    #10
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.