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

本文关键字：两次 文本 焦点 对话框 模态 | 更新日期: 2023-09-27 18:05:06

我使用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>

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

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

tabindex="-1"

也许这能帮上忙:

$(function(){
     $('.modal').find('input').first().focus();
});
相关文章：