Blur Event Does Not Get Fired In Ie7 And Ie6

July 02, 2024 Post a Comment

I have a dropdown Menu where in a div is clicked and List is shown. On focus out I am supposed to hide the list(i.e. when the user clicks or focuses on some other element and not

Solution 1:

The IE-proprietary focusout event worked for me:

$('.selected_option').bind('focusout', function(){
    alert('focusout');
});

Again, this is proprietary (see quirksmode) but may be appropriate if it solves your problem. You could always bind to both the blur and focusout events.

Solution 2:

onkeypress="this.blur(); return false;"

its works fine on all IE versions

Solution 3:

First realize that focus and blur events are only supported on focusable elements. To make your <div>s focusable you need to look at the tabindex property.

Solution 4:

Try using an anchor tag instead of a div since these are naively focusable. You can set the href of the anchor to "javascript:void(0)" to prevent it from actually linking to a pageand use the css property "display: block" to make it render like a div. Something like this:

<html><head><title>Exploring IE</title><styletype="text/css">/** Exploring IE**/.selected_option
      {
        display: block;
        height:18px;
      }
    </style><scripttype="text/javascript"src="jquery-1.3.2.min9919.js"></script><scripttype="text/javascript">
      $().ready(function(){
        $('.selected_option').blur(function(){
          alert('blurred');
        });
      });
    </script></head><body><ahref="javascript:void(0)"class="selected_option">anywhere in the page</a></body></html>

Haven't tested this, but I think it should work.

Solution 5:

Try:

$('.selected_option').bind('blur', function(){           
          alert('blurred');
});

Also you can make another trick - handle all mouse clicks or/and focus events and if some another control is selected, then your own is blurred (of course if it was selected previously).

JavaScript Controls