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();

});