如何在使用fancybox打开的新页面中将焦点设置在文本框上

Posted 2023-05-09

【中文标题】如何在使用fancybox打开的新页面中将焦点设置在文本框上

【英文标题】：How to set focus on a textbox in a new page, opened using fancybox

【发布时间】：2014-01-23 12:20:24

【问题描述】：

我有 2 页，page1 和 page2。点击page1中的链接后，page2将加载到fancybox中。我想在页面2加载后将焦点设置到页面2上的特定文本框。我可以知道怎么做吗？

这是我使用但不起作用的代码

$('.fancyboxTopic').fancybox(
   helpers:overlay: closeClick:false,
   'padding': 5,
   'width': '840px',
   'height': '95%',
   'autoScale': false,
   'autoHeight': false,
   'autoSize': false,
   'afterClose': function()window.location.reload(true);,
   'onComplete': function()$('#topicTitle').focus();
)

在我的链接中：

<a href="page2.asp" class="fancyboxTopic fancybox.iframe">page 2</a>

【参考方案1】：

试试

afterShow: function()
    $('.fancybox-iframe').contents().find("#topicTitle").focus();

...假设所有页面都在同一个域中。

注意：您可能需要添加 tabindex 属性才能使其与 Chrome 一起使用：

afterShow: function()
    $('.fancybox-iframe').contents().find("#topicTitle").attr("tabindex",1).focus();

顺便说一句，onComplete 是 fancybox v1.3.x 的一个选项，与 v2.x 不兼容

【讨论】：

非常感谢@JFK，但这没有用。实际上，我尝试将 $('.fancybox-iframe').contents().find("#topicTitle").attr("tabindex",1).focus() 替换为 alert('test');甚至警报都不起作用。

顺便说一句，我使用的是fancybox v2.1.4

@lordrebs 如果警报不起作用，我认为您可能在某处遇到 js 错误

你是救生员！感谢您的大力帮助。现在效果很好。