我有一个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>
$(".bio-input").focus();
- entropic$orange
,它应该是orange
。 - A. Wolff