使用jQuery添加CSS :focus选择器

Question

我有一个Bootstrap模态对话框，其中包含一个表单，当页面上的两个按钮被点击时触发。

当单击特定按钮时，我希望表单中的特定输入字段处于焦点状态，即光标在该字段中，并应用:focus样式。

$('.bio-input').focus(); 似乎不起作用（尽管它在代码片段中有效）。即使我要带到焦点的元素位于模态框中，但是该模态框作为部分视图在页面加载时呈现，因此该元素在单击时在DOM中可用。

在我的视图底部（使用slim），我有包含模态框的部分视图：

 = 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>

- ahimmelstoss

---

$(".bio-input").focus(); - entropic

没有颜色 $orange，它应该是 orange。 - A. Wolff

是的，抱歉！“可能是因为模态框需要先渲染？”是的，元素需要在DOM中可用才能被聚焦。因此，您最好发布有关此“模态框”的相关代码，肯定有一个事件可以在打开后绑定。 - A. Wolff

@ahimmelstoss - 听起来对我来说，模态框会复制部分的HTML并在模态框中显示，这意味着在DOM中存在一组与部分中相同的元素的副本。我们真正需要看到的是用于显示模态框的代码。 - Adam Jenkins

@ahimmelstoss - 我指的是显示模态框的JavaScript，而不是首先将HTML呈现到页面上的内容。您是否使用库来显示模态框？ - Adam Jenkins

Answer 1

您可以使用focus()函数。一旦按钮被点击，输入框将获得焦点。

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

示例

- GreyRoofPigeon

---

这对我在演示/片段中运行，但在我的应用程序上下文中没有用。我想知道模态与此有关吗？ - ahimmelstoss

你是否有多个class为'bio-input'的元素？ - entropic

@entropic 不是，我刚刚再次确认了。 - ahimmelstoss

Answer 2

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

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

- Codey

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元素上。

如果这对您不起作用，则必须提供页面链接或可重现问题的代码。

- Adam Jenkins

---

太好了，就是这样。我没有考虑到模态框也是其中的一部分。谢谢！ - ahimmelstoss