Question

我正在使用最新版本的twitter bootstrap（v3.1.1）。出于某种原因，我无法专注于第一个文本字段。这是我到目前为止所尝试的：

在文本字段中添加autofocus属性。这只是第一次有效。我第二次尝试再次致电$el.modal('show')时，它不再关注具有autofocus属性的文字字段。

模糊点击的按钮以触发模态显示，然后在我想要焦点的文本字段上调用.focus：

$('#btn-link').click(function(){
    $('#btn-link').blur();
    $('#link-modal').modal('show');
    $('#link_url').focus();
});

上述内容也不起作用。

最后我尝试了以下内容：

$("#link-modal").on('shown', function(){ //also tried on 'show'
    console.log('yo');
    document.activeElement.blur();
    $(this).find(".modal-body :input:visible").first().focus();
});

但是这个也不起作用，它不关注文本字段，甚至不执行console.log。我在这里做错了吗？提前谢谢！

Answer 1

好吧我让它工作了，好像我不得不使用过去的分词形式shown而不仅仅是show：

$('#link-modal').on('shown.bs.modal', function(){
  $('#link_url').focus();
});

Answer 2

Bootstrap 3及以上你需要使用这个......

 $('#link-modal').on('shown.bs.modal', function() {
         document.activeElement.blur();
         $(this).find(".modal-body :input:visible").first().focus();
    });

Answer 3

我终于在我的webform .aspx页面上工作了。在我的模态中，我有一个多行的asp：TextBox，名为＆＃34; uxComment＆＃34;弹出模态时我想要有焦点。这是我必须添加到.aspx页面的脚本：

<script type="text/javascript">
    function openCommentModal() {
        $('#uxCommentModal').modal('show');

        $('#uxCommentModal').on('shown.bs.modal', function () {            
            $('#<%= uxComment.ClientID %>').focus();
        });
    }
</script>

以下是我的模态的代码：

<div id="uxCommentModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">                              
                <div class="modal-content">
                    <div class="modal-header">                                                        
                        <h4 class="modal-title text-center">Add New Comment</h4><hr />
                    </div>
                    <div class="modal-body">   
                        <div class="row">                                
                            <div class="form-group col-sm-12">  
                                <label for="uxComment">Comment:</label>
                                <asp:TextBox ID="uxComment" runat="server" Rows="25" TextMode="MultiLine" CssClass="form-control" />                                                      

                                <asp:RequiredFieldValidator ID="uxAddNewCommentRequired" runat="server"
                                    Display="Dynamic" ControlToValidate="uxComment" 
                                    ValidationGroup="addComment" CssClass="text-danger">
                                    <br />(Comment required)
                                </asp:RequiredFieldValidator>

                                <asp:RegularExpressionValidator ID="uxAddNewCommentValidator" 
                                    runat="server" Display="Dynamic" 
                                    ControlToValidate="uxComment" CssClass="text-danger"
                                    ValidationExpression="^((.|\n){0,5000})$"
                                    ValidationGroup="addComment">
                                    <br />(Comment cannot exceed 5000 characters)
                                    </asp:RegularExpressionValidator>
                            </div>                                
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-9">
                                <button type="button" id="uxCancelComment" runat="server" class="btn btn-default" onserverclick="uxCancelComment_Click" data-dismiss="modal">Cancel</button>
                                <asp:Button ID="uxSubmitComment" runat="server" Text="Add Comment" 
                                    CssClass="btn btn-primary" 
                                    OnClick="uxSubmitComment_Click" CausesValidation="true" 
                                    ValidationGroup="addComment" />
                            </div>
                        </div>
                    </div>
                </div>   
            </div>
        </div>

我在asp：按钮点击事件中弹出模态：

protected void uxCommentAddButton_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openCommentModal();", true);
}

我希望这可以帮助仍在使用网络表单的人。我在这上花了几个小时！

twitter bootstrap模态自动聚焦于第一个文本字段

3 个答案: