Question

我有一个弹出窗体的jquery对话框。表单分为对话框中的多个选项卡。我正在努力开发键盘，并希望在一个选项卡的最后一个元素上按Tab键，将我带到下一个选项卡的第一个元素。现在，Tab键顺序是通过对话框选项卡，然后通过输入的第一个选项卡，然后是OK按钮。而不是重量 - >好吧我想让它去重量 - >价格。有一个简单的方法吗？

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

这种情况正在发生，因为其他表单输入隐藏在隐藏的tab div中，因此跳过了tabbing。因此，您必须手动收听按Tab键的人，然后显示其他选项卡。

在“权重”输入上，绑定到keydown。看看你的李斯特得到的钥匙。如果有人按下“tab”，请选择add_financial href并向其发送“click”事件以使其更改为下一个选项卡，然后选择“price”输入并在其上选择focus（）。

Jquery ui tabs + dialog + form tab order

2 个答案: