Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer OnBlur and OnFocus events fire in the wrong order?

    Hi,

    I'm having some problems with some javascript events firing in the wrong order under certain workflows. Here's the gist of it:

    I have a form with many fields, mostly input type = text. Each field as an OnBlur and OnFocus event tied to javascript functions.

    IE's website (http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx) states that "The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus." and that is exactly what happens when tabbing through the fields.

    The tricky part is that it doesn't perform this way when CLICKING to another field. When clicking to another field it performs the new field's OnFocus first, and then the first field's OnBlur event after. This is bad because the OnFocus sets a global variable's value to whatever value is in that box at the time it gets focus and if the onblur validation fails, that value is inserted back into the box. So what's happening is the validation for field 1 fails and the value from field 2 is then written into field 1.

    This also seems to only happen when the page is opened as a modal window as opposed to just opening the page on it's own. It doesn't happen in FireFox, I've only been able to get it to happen on IE 8 + (haven't tried any other browsers.)

    Anyone else have this happen to them? Does it sound like an IE bug?

    Thanks

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Instead of a global variable to hold presumably the initial value, you could use the defaultValue property of each field.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's a good idea! That is the exact thing I'm doing with the onfocus!

    Only problem is I don't know that I've ever used defaultValue. It is not listed as an attribute on the input tags:
    http://www.w3schools.com/tags/tag_input.asp

    I know you can set the value of it on load by using the value="XXX" attribute but when you change that it also changes the value shown on the page.

    can you please give me more info on the defaultValue attribute?

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by mharper View Post

    can you please give me more info on the defaultValue attribute?
    It isn't an attribute, it is a browser-assigned property.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by mharper View Post
    It is not listed as an attribute on the input tags:
    http://www.w3schools.com/tags/tag_input.asp
    That's because it isn't an HTML attribute but rather a JavaScript property.

    While the W3Schools site is extremely out of date (particularly with their JavaScript pages) they do have a page on it at http://www.w3schools.com/jsref/prop_...faultvalue.asp
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion and information Logic Ali and Felgall!

    I've made a small test application and it appears to work as expected!

    Thanks to both of you for helping me with that. I'd still like to know why IE behaves the way it does (other than the fact that IE is terrible.) but now that you've helped me find a solution I can implement it.

    Thanks

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    There is no reason why events on different elements need to run in any particular order. The different events are completely unrelated and so it is up to each browser as to what order it decides to run them in.

    The only situation where there is an order to events is where they are all triggered on the same element by the same action - such as double clicking triggering mousedown mouseup click mousedown mouseup click dblclick in that order - or where an event listener bubbles outward from the innermost element it is triggered on outward to the entire web page unless told to stop before it gets that far.

    Even with two event listeners triggered by the same action on the same event and element can run in whichever order the browser decides to run them with no guarantees that browsers will all run them in the same order.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •