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

Question

我有一个bootstrap模态对话框，这个模态对话框有一个tabindex="-1 "属性，在这个模态对话框中的表单元素工作正常...我调用了一个固定的其他div的表单元素。但是这个表单元素不能访问。当表单元素悬停在它们上面时，光标看起来很正常。但当我点击时，它不聚焦。

如果我把tabindex="-1 "去掉，就可以了。但我需要tabindex = "-1 "属性。

下面是html bootstrap模态对话框。

    <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与表单元素。不在bootstrap模式对话框中，也不能访问。

<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不能相同，因为TabIndex指定了该元素的焦点工作顺序，它必须是唯一的索引。

例如，我们在HTML中有2个按钮，第一个是 "确定"，标签索引=1，另一个是 "取消"，标签索引为 "2"。

当用户点击 "tab "键时，首先会关注 "确定 "按钮，接下来如果我们再次点击Tab键，现在会关注 "取消 "按钮。

所以，TableIndex必须是唯一的，才能发挥它的作用。