twitter引導模式自動專注於第一個文本字段

我使用的是最新版本的twitter引導（v3.1.1）。出於某種原因，我無法讓它專注於第一個文本字段。這是我到目前爲止所嘗試的：twitter引導模式自動專注於第一個文本字段

在文本字段中添加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。我在這裏做錯了什麼？提前致謝！

來源

2014-03-05 user225269

你能設置一個小提琴嗎？ – Shashank

引導3及以上的u需要使用此...

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

來源

2014-03-05 07:11:44 Shashank

這似乎並沒有工作，雖然它執行內部的代碼時，模式顯示我想要的文本字段沒有得到重點。 – user225269

您應該使用'shown.bs.modal'而不是'show.bs.modal'。 – bruha

確定我得到它的工作，好像我不得不用過去分詞形式shown，而不是僅僅show：

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

來源

2014-03-05 08:03:27 user225269

我終於在我的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模態：可見按鈕單擊事件這裏：

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

我希望這可以幫助仍然使用webforms的人。我在這上面花了好幾個小時！

來源

2016-09-23 13:09:15 user1778158

twitter引導模式自動專注於第一個文本字段

回答

相關問題