无法设置模态内部元素的 tabindex

Posted 2023-05-07

【中文标题】无法设置模态内部元素的 tabindex

【英文标题】：Unable to set tabindex of inner elements of modal

【发布时间】：2018-08-16 09:09:39

【问题描述】：

我想在我的模态中设置选择选项的 tabindex 和加号（fa-plus）。我试过 tabindex="1"。问题是选择接收焦点，但我无法为选项值输入任何内容。此外，加号不会获得任何焦点。

以下是我的代码：

 <div class="modal fade" id="matnr_name_modal" tabindex="-1" role="dialog" >
    <div class="modal-dialog modal-md" role="document">
        <div class="">
            <div class="modal-content">
                <div class="modal-header" >
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <!--<h4 class="modal-title" >Material Name</h4>-->
                     <div class=" form-group required col-md-12 pull-right" >
                        <div class="col-md-2 nopadding">!!Form::label('type', 'Category');!!</div>

                        <div class="col-md-6">
                            <select class="form-control nopadding select2 type " id="type" name="type">
                                <option value="">Select Type</option>

                            </select>
                        </div>
                        <div class="col-md-1 nopadding">
                            <a class="" style="color: green;" target="_blank" href="<?php echo url('add_category');?>"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>

                <div class="modal-body"  style="height: 300px;overflow-y: scroll;">


                </div>
                <div class="modal-footer">
                    <p class="pull-left">Code:-<strong><span class="ccode"></span></strong></p>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary create_name">Create</button>
                </div>

            </div>
        </div>
    </div>
</div>

【参考方案1】：

很高兴看到它在 codepen 中工作。 但从外观上看，我认为您在选择框中使用 select 2 插件来实现预输入功能。 由于插件隐藏了选择框并将其替换为自定义 ui，因此您需要编程访问以触发它以焦点打开。

Select 2 Opening a dropdown - documentation Stackexchange Question similar to this