jQuery UI标签+对话框+表单标签顺序

Question

I have a jquery dialog that pops up with a form. The form is split across multiple tabs within the dialog. I'm working on keyboard ease and would like for pushing the tab key on the last element of one tab to take me to the first element of the next tab. Right now the tab order is to go through the dialog tabs, then through the first tab of inputs, then to the OK button. Instead of Weight->OK I want it to go Weight->Price. Is there an easy way to do this?

The HTML:

<div id='add_dialog' title='Add'>
    <form id="add_form" method="POST">
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="ProductId" value="2">
        <div id="jquery-ui-tabs">
            <ul>
                <li><a href="#add_details">Details</a></li>
                <li><a href="#add_financial">Financial & Comments</a></li>
            </ul>

            <div id="add_details">                  
                Quantity: <input type="text" name="Quantity" value="1"><br />
                QuantityPerPack: <input type="text" name="QuantityPerPack" value="0"><br />
                Pc Weight: <input type="text" name="PieceWeight" value=" "><br />
            </div>
            <div id="add_financial">
                Price: <input type="text" name="PriceHigh" value="0.00"><br />
                Comment: <textarea name="StockComment"></textarea><br />
            </div>
        </div>
    </form>
</div>

And the initializing javascript:

$('#add_dialog').dialog(
        { 
            autoOpen: false,
            maxHeight: 500,
            width: 600,
            minWidth: 600,
            zIndex: 99999,
            position: ['center', 50],
            buttons:[{
                text: "Ok",
                class: "dialog_ok",
                click: function() {
                $(this).dialog("close"); 
                    $("#add_form").submit();
                    }
                },
                {
                text: "Cancel",
                class: "dialog_cancel",
                click: function() {
                    $(this).dialog("close"); 
                }
            }]          
        });

Answer 1

It wasn't so bad. For posterity, here is the code I eventually used. I added IDs to the two inputs, then I attached a keydown event and if it's a tab I move to the next tab and then focus on the first element.

$('#add_form_pieceweight').keydown(function(e) {
  var code = e.keyCode || e.which;
  if (code == '9') {
       $('#jquery-ui-tabs').tabs('select',1);
       $('#add_form_price').focus();
       return false;
  }
});

Answer 2

This is happening because the other form inputs are hidden in a hidden tab div, and thus skipped over for tabbing through. So you have to manually listen for someone pressing tab and then show the other tab.

On "weight" input, bind to keydown. Look at the key they pressed in the event that your lister gets. If someone pressed "tab", select the add_financial href and send it a "click" event to get it to change to the next tab, then select the "price" input and focus() on it.