Search code examples
javascriptjqueryhtmlinternet-explorer-9

Text Input focus anomaly in IE9

I am trying out this rather simple code. It is supposed to shift the focus to the neighboring text input whenever there is mouseup on the first one:

<!DOCTYPE html>
<html>  
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">   
    </script>
    <script>
      $(document).ready(function() {
        $(".foo").mouseup(function() {
          $(".boo").focus();
        });
      });   
    </script>
  </head> 
  <body>
    <input type='text' class='foo' />
    <input type='text' class='boo' />
  </body>    
</html>

In all browsers except IE9 (I didn't dare test it in IE8 or below!), it works fine for both left button and right button (for right button mouseup, the context menu still pops up on the first input even though the focus shifts to the 2nd one). However, in IE9, the focus still remains on the first text input (the context menu also popping up there).

Is there any way to fix it so that the focus shifts to the 2nd one?

Solution

  • .select() in ie should work:

    http://jsfiddle.net/n4hGC/5/

    $(document).ready(function(){
  $('.foo').mouseup(function() {
    $('.boo').focus();
  });
  $('.foo').contextmenu(function() {
      $('.boo').select();
      return false;
  });
});

    Have also handled the context menu by returning false. Hope helps!