Issue with jQuery keydown

I am facing an issue with this simple jQuery code.

I have attached the HTML structure as well,

The code is setting focus to the input field fine if I make a click anywhere on the div with id "scroll-pane", but if I click anywhere else in the screen, for example, code above the div id "scroll-pane", it doesnt bring the focus. what am I doing wrong here?

<script language="javascript">
$(function()
{
    $('.scroll-pane').jScrollPane();
    $('#outerBody').keydown(function() {
      $('#serialCode').focus();      
    });
});
</script>

<center id="outerbody">
<table id="tab1" class="Tab1" width="100%">
<tr>
    <td width="60"></td>
    <td width="113"><p align="center">C</td>
    <td width="105">&nbsp;</td>
</tr>
</table>

<table  id="tab2" class="Tab2" border="0" width="100%">
<tr>
    <td>&nbsp;</td>
    <td>A </td>
    <td>B </td>
    <td><input type="text" id="serialCode" class="serialCode" /></td>
</tr>
</table>

<div id="scroll-pane" class="scroll-pane">

</div>

Either close the tag (</center>), or put the "outerBody" class on a div, Or:

<script language="javascript">
$(function()
{
    $('.scroll-pane').jScrollPane();
    $('#tab1,#tab2,#scroll-pane').keydown(function() {
      $('#serialCode').focus();      
    });
});
</script>

Why not attach the keydown event to the entire document window?

$(document).keydown(function() {
  $("#serialCode").focus();
});​

This might work, or help you figure it out.

view: http://jsbin.com/iwuwa4
edit: http://jsbin.com/iwuwa4/edit

Try $('#serialCode')[0].focus();

Calling focus on the jQuery object fires events associated with focus. You need to call focus on the dom element.

bind focus event on document.