A complete example that focus on the url address

A complete example that focus on the url address

I have removed everything except what I want to ask about.
That is why the cursor focus is at the wrong place and the ugly meny is displayed..

Here is how this works.
1. Click on the button
2. Now A very small JQuery-UI dialog is displayed.
3.Focus the cursor in the text field
4. Press function key F4 which will create another JQuery-UI dialog
5. Now as you can see why is the cursor focus in the URL address.You can also see that
in addition a very ugly meny that is connected to the URL address in some way.
6. If I move cursor focus to the vesselname the ugly menu is closed
7. What I want is that the cursor focus to be in vesselname when function key F4 is pressed.

You have the complete code below
I hope that somebody can guide me so I get cursor focus to be on the vesselname
because it can't look like it does now.


<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <link href="../JavaScript/jquery/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
    <script src="../JavaScript/jquery/jquery.js" type="text/javascript" />
    <script src="../JavaScript/jquery/ui/jquery-ui.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

    <script type="text/javascript">
       function Click_NewVoyage()
       {
           $("#dlgNewVoyage").dialog({
               width: 900
           });
       }

       function Keydown_FartygInNewVoyageDialog(e)
       {
           if (e.keyCode == 115)
           {
               $("#dlgSearchAFARTYG").dialog({
                   width: 700
               });
           }
       }

       $(function ()  //wait until the DOM is complete
       {
           $("#newVoyage").click(Click_NewVoyage);
           $("#vesselID").keydown(Keydown_FartygInNewVoyageDialog);
       });
    </script>
</head>
<body>
   <div id="voyage">
       <input id="newVoyage" type="button" value="New Voyage" />
   </div>
    <div id="dlgNewVoyage" title="New Voyage" style="width:900px; display:none">
       <br />
       <table>
          <tr><th> VesselID: </th></tr>
          <tr><td> <input type="Text" id="vesselID" size="6" /> </td></tr>
       </table>
    </div>
    <div id="dlgSearchAFARTYG" title="SearchAFARTYG" style="width:700px; display:none">
       <table>
          <thead><tr><th>Vessel name</th></tr></thead>
          <tr> <td><input type="Text" id="afartygDescription" size="12" /></td></tr>
       </table>
    </div>
</body>
</html>