browser compatibility: Javascript: onblur: Firefox vs. InternetExplorer

Discussion in 'Javascript' started by Steve, Jan 15, 2008.

  1. Steve

    Steve Guest

    Hi;

    I'm using
    - Firefxo 2.0.0.11
    - Internet Explorer 7.0.5730.11
    Windows XP Professional Service Pack 2

    I'm noticing that IE and Firefox handle onblur events slightly
    differently. In the HTML page below I have a text field and a submit
    button. The top one has a function connected to the onblur event
    when someone leaves the text field. The submit button has a funciton
    connected to the onclick event.

    In both browsers, both functions will fire when I move the mouse from
    the text field to the button and press the button.

    However, in IE processing will halt in the first function for onblur
    and if I press cancel in the resulting prompt, processing will
    stop. This is what I want.

    In Firefox the prompt will come up to but processing will fall through
    to the onlick function at the same time. I don't want this.

    Why does this happen and how can I alter my code to work the same in
    both browser, such that Firefox will do the onblur code and not fall
    through to the onclick unless the prompt gets a positive response?

    Thanks much in advance for any information









    <html>
    <head>
    <title>Test onblur FF vs IE</title>
    <script language = "JavaScript">
    function procApple(typeApple)
    {
    if(typeApple != 'gala')
    prompt("I only eat Gala Apples, please give me a gala");
    var self=this;setTimeout(function(){self.focus();},1);
    }
    function validate()
    {
    alert("in validate function");
    }
    </script>
    </head>
    <body background = "white">


    <form name = "form1">


    Apple
    <input type = "text" name = "apple" onblur = "procApple(this.value);">
    <br>
    <br>

    <input type = "submit" name = "submitButton" value = "submit" onclick
    = "validate();">

    </form>
    </body>
    </html>
    Steve, Jan 15, 2008
    #1
    1. Advertising

  2. Steve

    David Mark Guest

    Re: browser compatibility: Javascript: onblur: Firefox vs. InternetExplorer

    On Jan 15, 10:40 am, Steve <> wrote:
    > Hi;
    >
    > I'm using
    > - Firefxo 2.0.0.11
    > - Internet Explorer 7.0.5730.11
    > Windows XP Professional Service Pack 2
    >
    > I'm noticing that IE and Firefox handle onblur events slightly
    > differently.   In the HTML page below I have a text field and a submit
    > button.    The top one has a function connected to the onblur event
    > when someone leaves the text field.   The submit button has a funciton
    > connected to the onclick event.
    >
    > In both browsers, both functions will fire when I move the mouse from
    > the text field to the button and press the button.


    You mean that when you click the button, the text input loses focus,
    which fires its blur event and then the button fires its click event.

    >
    > However, in IE processing will halt in the first function for onblur
    > and if I press cancel in the resulting prompt, processing will
    > stop.    This is what I want.


    You can't have it.

    >
    > In Firefox the prompt will come up to but processing will fall through
    > to the onlick function at the same time.   I don't want this.
    >
    > Why does this happen and how can I alter my code to work the same in
    > both browser, such that Firefox will do the onblur code and not fall
    > through to the onclick unless the prompt gets a positive response?


    The solution is to validate properly (in a submit listener attached to
    the containing form.) In addition to cross-browser issues, there is
    nothing more annoying than popups that interfere with focusing.
    David Mark, Jan 15, 2008
    #2
    1. Advertising

  3. Steve wrote:
    > [...]
    > <html>
    > <head>
    > <title>Test onblur FF vs IE</title>
    > <script language = "JavaScript">


    http://validator.w3.org/
    http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

    > function procApple(typeApple)
    > {
    > if(typeApple != 'gala')
    > prompt("I only eat Gala Apples, please give me a gala");
    > var self=this;setTimeout(function(){self.focus();},1);


    `this', and therefore `self' (no matter the closure), refer to the Global
    Object here, of which procApple() is a method. That object has no
    standardized focus() method (hence a runtime error is possible), nor does it
    make sense to call that method after a one millisecond timeout (the actual
    timeout will always be greater; not below 10 ms in Gecko-based UAs compiled
    for x86, and then there's the system timer tick to increase that in practice).

    Instead, you want to pass the value of `this', as it is in the event handler
    attribute value, as argument, and then use that object reference to refer to
    the event target:

    function isMethod(o, p)
    {
    return o && /\b/function|object)\b/i.test(typeof o[p]) && o[p];
    }

    function procApple(o)
    {
    if (o.value != "gala")
    {
    // ...

    if (isMethod(o, "focus"))
    {
    o.focus();
    }
    }
    }

    <... onblur="procApple(this);">

    That said, don't use `onblur', use the `onsubmit' attribute of the `form'
    element instead.

    > [...]
    > <form name = "form1">


    Your form does not need a name, but the element needs an `action' attribute.

    > Apple
    > <input type = "text" name = "apple" onblur = "procApple(this.value);">


    type="text" is redundant here as that is the default value of the attribute.

    > <br>
    > <br>


    Don't use `br' elements for margins; use CSS instead.

    > <input type = "submit" name = "submitButton" value = "submit" onclick
    > = "validate();">


    Don't use the `onclick' attribute of the submit button for form validation;
    use the `onsubmit' attribute of the `form' element instead:

    <form ... onsubmit="return validate(this);">
    ...
    </form>

    validate() would have to return `true' on success, `false' otherwise.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Jan 15, 2008
    #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. Ryan Clark

    shdocvw.internetexplorer object help

    Ryan Clark, Jan 6, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    6,511
    quantum
    Feb 2, 2004
  2. quantum

    Using SHDocVW-InternetExplorer

    quantum, Feb 2, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    2,368
    quantum
    Feb 2, 2004
  3. Florian Fredegar Haftmann
    Replies:
    1
    Views:
    392
    Peter Hansen
    Nov 23, 2003
  4. Udo Huebner
    Replies:
    22
    Views:
    1,044
    Udo Huebner
    Feb 2, 2012
  5. Jeff

    Firefox onblur question

    Jeff, Jun 5, 2007, in forum: Javascript
    Replies:
    1
    Views:
    129
    -Lost
    Jun 6, 2007
Loading...

Share This Page