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（）。