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

【问题标题】：Unable to set tabindex of inner elements of modal无法设置模态内部元素的 tabindex
【发布时间】：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>

【问题讨论】：

标签： html css laravel-5.2 tabindex

【解决方案1】：

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

【讨论】：