Question

我正在尝试将焦点设置到模态框中的输入字段，但我无法使其工作。

这是我尝试过的代码：

// MODAL BOX
$(function() {
    $('a[rel*=leanModal]').leanModal({ top : 100, closeButton: ".modal_close" }).find("#first-focus").focus();      
});

和

// MODAL BOX
$(function() {
    $('a[rel*=leanModal]').leanModal({ top : 100, closeButton: ".modal_close" }).find("input:text:visible:first").focus();      
});

有关我可以尝试的更多建议吗？

Answer 1

尝试通过id直接访问该元素：

$("#first-focus").focus();

希望这有帮助。

Answer 2

您正在使用正确的方法setFocus（）。

一切正常，请参阅this JSFiddle

这意味着你可能错过了正确的选择器。对于第一个标记first-focus是一个ID，因此可以直接将其称为$('#first-focus').setFocus();

您为codepen提供的链接正在执行setFocus()方法，该方法未由jQuery定义。 jQuery方法是focus()。除此之外，此方法仅被调用一次。应该在点击Open链接时调用它。

您的代码现在将成为

// MODAL BOX
$(function() {
  $('a[rel*=leanModal]').leanModal({
    top: 100,
    closeButton: ".modal_close"
  }).click(function () {
    $('#first-focus').focus();
    console.log($("#first-focus").length);
  });
});

这是一个有效的codepen link

最好拨打focus() leanModal完整回调，但我无法在文档或源代码中找到此类回调。

Answer 3

尝试

$("a[rel*=leanModal]").on('click', function(){
  $(this).leanModal();
  $("#first-focus").focus(); 
})

将焦点设置在模态框中的输入字段上

3 个答案: