twitter bootstrap modal自動關注第一個文本字段

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，名為“ uxComment”，當模態彈出時，我希望獲得焦點。 這是我必須添加到.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：Button click事件上彈出模態：

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

希望這對仍在使用網絡表單的人有所幫助。 我花了幾個小時！