通過jQuery添加css：focus selector

Question

我有一個Bootstrap模式，其中包含單擊頁面上的兩個按鈕時觸發的表單。

當單擊一個特定按鈕時，我希望窗體中的特定輸入字段處於焦點，就像光標位於該字段中一樣，並且應用了樣式：focus。

$('.bio-input').focus(); 似乎不起作用（盡管它在代碼片段中有效）。 盡管我試圖引起關注的這個元素是一個模態，但是模態在頁面加載時呈現為部分，因此該元素在點擊時在DOM中可用。

在我的視圖底部（苗條），我有部分持有模態：

 = render partial: 'users/profile/edit_profile_modal'

模態的id為#popup-editprofile 。

然后，在下面，我的按鈕標記將該id作為數據目標，並且數據切換為“模態”。

在此先感謝您的幫助。

 $(document).ready(function() { $('.edit-bio-btn').click(function() { $("#bio-input").focus(); }) }); 

 #bio-input:focus { border-left: 5px solid orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button name="button" type="submit" class="button btn btn-xs edit-bio-btn" data-target="#popup-editprofile" data-toggle="modal"><i class="fa fa-pencil"></i><span>Edit bio</span></button> <textarea name="profile[bio]" id="bio-input" placeholder="Enter Bio" class="form-control edit-profile-input"></textarea> 

Answer 1

您可以使用focus()函數。 單擊按鈕后，輸入字段將被聚焦。

$('.edit-bio-btn').click(function() {
    $('input.thisClass').focus();
})

DEMO

Answer 2

試試這個： http ： //jsfiddle.net/mgm1k5s7/

$("#button").on("click", function () {
    $("#input").focus();
});

Answer 3

Bootstrap模態事件： http ： //getbootstrap.com/javascript/#modals-events

在您最終提供使用引導模式的信息后，答案變得清晰：

$('#id-of-modal-element').on('shown.bs.modal',function() {
  $('.bio-input',this).focus();
});

這個片段說，當你的模態元素觸發shown.bs.modal事件時，請關注該模態內部的.bio-input元素。

如果這對您不起作用，那么您必須提供指向您的頁面的鏈接或代碼以重現您的問題。