Question

我有一个Bootstrap模式，其中包含单击页面上的两个按钮时触发的表单。

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

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

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

 = render partial: 'users/profile/edit_profile_modal'

模态的ID为#popup-editprofile。

然后，在下面，我的按钮标记将该ID作为数据目标，并且数据切换是“模态”＆＃39;。

提前感谢您的帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

通过jQuery添加css：focus selector

3 个答案: