jQuery UI標簽+對話框+表單標簽順序

Question

我有一個彈出對話框的jQuery對話框。 對話框中的多個選項卡均分為該表格。 我正在努力簡化鍵盤，並希望在一個標簽的最后一個元素上按Tab鍵，將我帶到下一個標簽的第一個元素。 現在，選項卡順序是依次通過對話框選項卡，輸入的第一個選項卡和“確定”按鈕。 而不是Weight-> OK，我希望它為Weight-> Price。 是否有捷徑可尋？

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>

並初始化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

還不錯。 為了后代，這是我最終使用的代碼。 我在兩個輸入中添加了ID，然后附加了一個keydown事件，如果是選項卡，則移至下一個選項卡，然后將焦點放在第一個元素上。

$('#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

之所以發生這種情況，是因為其他表單輸入被隱藏在一個隱藏的選項卡div中，因此跳過了該選項卡。 因此，您必須手動聽某人的聲音，然后按Tab鍵，然后顯示其他選項卡。

在“重量”輸入上，綁定到按鍵。 查看他們在您的列表獲取到時按下的鍵。 如果有人按下“制表符”，請選擇add_financial href並向其發送“點擊”事件，以使其更改為下一個選項卡，然后選擇“價格”輸入並在其上關注focus（）。