添加 css :focus 选择器通过 jQuery

Question

我有一个 Bootstrap 模态框，当单击页面上的两个按钮时会触发该表单。

单击一个特定按钮时，我希望表单中的特定输入字段处于焦点位置，因为光标位于该字段中并且应用了 :focus 的样式。

$('.bio-input').focus(); 似乎不起作用（尽管它在代码片段中起作用）。尽管我试图聚焦的这个元素处于模态中，但模态在页面加载时呈现为部分，因此该元素在 DOM 单击时可用。

在我的视图底部（苗条），我有包含模态的部分：

 = render partial: 'users/profile/edit_profile_modal'

模态框的 ID 为 #popup-editprofile。

然后，在下面，我的按钮标签将该 id 作为数据目标，数据切换为 'modal'。

在此先感谢您的帮助。

$(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

试试这个：http://jsfiddle.net/mgm1k5s7/

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

Answer 2

您可以使用focus()函数。单击按钮后，输入字段将获得焦点。

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

DEMO

Answer 3

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

在您最终提供您正在使用 bootstrap 模态的信息后，答案就很清楚了：

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

此代码段表示，当您的模式元素触发 shown.bs.modal 事件时，请关注该模式内部的 .bio-input 元素。

如果这对您不起作用，那么您必须向您的页面提供 link 或重现您的问题的代码。

添加 css :focus 选择器通过 jQuery

Add css :focus selector via jQuery

html

javascript

css

jquery

bootstrap-modal