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

});

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

2 个答案: