引导模式对话框 tabindex="-1" 不可访问的表单元素

Question

我有一个引导模态对话框，这个模态对话框有一个 tabindex="-1" 属性，并且在这个模态表单元素中正常工作.. 我称其为具有表单元素的固定其他 div。但是这个表单元素无法访问。当表单元素悬停在光标上时，光标看起来很正常。但是当我点击它时它不会聚焦。

如果我删除标签索引 =“-1”，没关系。但我需要 tabindex = "-1" 属性。

以下 html 引导模式对话框..

    <div class="modal fade" role="dialog" tabindex="-1" data-bind="modal:$parent.Edit">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Ekle/Düzenle</h4>

                </div>
                <div class="modal-body">
                    <div class="inner-padding">
                        @Html.Partial("FieldItem")
                        <!--Some form elements for modal dialog this form elements working properly-->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" style="float:none;" data-dismiss="modal">Kapat</button>
                </div>
            </div>
        </div>
    </div>

然后在 html 之后调用带有表单元素的 div。不在引导模式对话框中且不可访问

<div id="value-popup" role="dialog" onclick="event.stopPropagation()"  style="width:300px;padding:15px;z-index:99999;position:fixed;left:0px;top:0px;background-color:white; border-radius:5px;border:1px solid #808080" data-bind="visible:Show, style:{left:PanelPos().x + 'px',top:PanelPos().y + 'px'}">

    <div class="form-group" style="padding:15px;">
        <label class="control-label">Ara</label>
        <input  type="text" placeholder="Ara" data-bind="textInput:Keyword,hasFocus:SearchFocus" class="form-control value-helper-search"  onclick="event.stopPropagation()" />
    </div>
    <select size="20" class="form-control" data-bind="foreach:Result,value:SelectedItem" onclick="event.stopPropagation()" >
        <optgroup label="x" data-bind="attr:{label:Name},foreach:FilteredItems">
            <option data-bind="value:$data, text: Name"></option>
        </optgroup>
    </select>
</div>

Answer 1

在 HTML 中，标签索引不能相同，因为 TabIndex 指定了关注该元素的顺序，它必须是唯一索引。

例如我们在 html 中有 2 个按钮，第一个是“OK”，标签索引为“1”，另一个是“取消”，标签索引为“2”

当用户点击“Tab”键时，它会首先关注“OK”按钮”，接下来如果我们再次点击Tab键，现在它将关注“Cancel”按钮。

所以 TableIndex 必须是唯一的，才能按原样工作。