Bootstrap 模态对话框需要两次单击才能在文本框中获得焦点

Question

我正在使用 Bootstrap modal() 方法显示下面的 div。当它显示时，我必须单击文本框 (id=txtQueriedByUserFilter) 两次以使光标停留在文本框中，以便输入搜索词。

如何获得第一次点击来设置焦点？我什至尝试过使用 jQuery 来设置焦点，但这不起作用。

$('#roster-filter-modal').modal();

    <div class="modal fade hide" id="roster-filter-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="padding: 0px;">
                    <h3 style="line-height: 20px;background: #333;padding: 10px;color: #fff;font-weight: normal;font-size: 15px;margin-bottom:0px;">
                        Roster Filter Options
                    </h3>
                </div>
                <div class="modal-body">
                    <div class="filter-form module module-open" style="margin-top: 0px; margin-bottom: 20px; margin-right: 0px;  padding: 10px; border: 0px;">
                        <table  style="">
                            <tbody>
                                <tr>
                                    <td style=""></td>
                                    <td style="font-family: 'LatoBold'; width: 18px; ">
                                        Queried By User<br/>
                                        <input type="text" id="txtQueriedByUserFilter"  /> 
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="roster-filter-confirm" class="btn btn-primary" >Filter Roster</a>
                </div>
            </div>
        </div>
    </div>

Answer 1

我从顶部 div 中删除了这个属性，这解决了问题。

tabindex="-1"

Answer 2

也许这会有所帮助：

$(function(){
     $('.modal').find('input').first().focus();

});