Question

我有一个带有bootstrap模态模板的html文件;我在2个div's内部得到2个input，唯一不同的是：第一个（countdown maxlength="140"）有input而第二个没有modal。

每次// focus input every time modal is open $(document).ready(function() { $('.modal').on("shown.bs.modal", function() { $('.form-control').focus(); });开放时，我都创建了一个功能来关注input：

class UserEnvelope(val user:User?) {}

问题是：被关注的{{1}}是第二个（底部）而不是第一个。

Answer 1

$(document).ready(function () {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function () {
        $("#txtname").focus();
    })
});

尝试这个。

Answer 2

如果您使用$('.form-control').focus();，那么如果您想要关注第一个元素，那么这将关注最后input，那么您应该使用

 $($('.form-control')[0]).focus();

如果您不希望使用索引进行此操作，那么您应该id选择器。

Answer 3

问题是因为您有多个具有相同.form-control类的元素。然后jQuery遍历它找到的所有元素并在它们上触发focus事件。结果，只有找到的最后一个元素留下焦点。

要解决此问题，您可以使用:first来一般性地选择模态中的第一个输入，并仅触发focus：

$('.modal').on("shown.bs.modal", function() {
  $(this).find('.form-control:first').focus();
});

错误的输入被关注

3 个答案: