javascript – 通过jQuery添加css：焦点选择器

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

当单击一个特定按钮时,我希望窗体中的特定输入字段处于焦点,就像光标位于该字段中一样,并且应用了样式：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>

解决方法:

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,javascript,css,bootstrap-modal,html
来源： https://codeday.me/bug/20190612/1222979.html