Bootstrap модальное диалоговое окно tabindex = "- 1" недоступные элементы формы - PullRequest
Новая
       4

Bootstrap модальное диалоговое окно tabindex = "- 1" недоступные элементы формы

0 голосов
/ 07 мая 2020

У меня есть модальный диалог bootstrap, и этот модальный диалог имеет атрибут tabindex = "- 1", и в этой модальной форме элементы работают правильно .. Я вызываю фиксированный другой div с элементами формы. Но эти элементы формы недоступны. Курсор выглядит нормально при наведении на них курсора. Но когда я щелкаю, он не фокусируется.

Если я удалю tab index = "-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>

1 Ответ

0 голосов
/ 07 мая 2020

В HTML индекс вкладки не может быть таким же, поскольку TabIndex определяет порядок, в котором фокус на этом элементе должен работать, это должен быть уникальный индекс.

Например, у нас есть 2 кнопки в html , первый - «ОК» с индексом вкладки = 1, а другой - «отмена» с индексом вкладки «2»

когда пользователь нажимает клавишу «вкладка», он сначала фокусируется на кнопке «ОК», затем если мы снова нажмем клавишу Tab, теперь он сосредоточится на кнопке «Отмена».

Таким образом, TableIndex должен быть уникальным, чтобы он работал так, как он создан.

...