输入文本中的焦点或自动对焦在 Firefox 16.0.2 中不起作用答案

【问题标题】：Focus or Autofocus in Input Text doesn't work in Firefox 16.0.2输入文本中的焦点或自动对焦在 Firefox 16.0.2 中不起作用
【发布时间】：2012-10-25 21:29:11
【问题描述】：

我想在页面加载/启动后专注于输入文本。这是我的表格：

<form method="post" action="tags">
    <input type="hidden" name="id" id="id" value="getId()" />
    <input type="text" name="tag" id="tag" autofocus="autofocus"/>
    <input type="submit" value="Add" name="add" />
</form>

我尝试了 jQuery，但它在 Firefox 上不起作用：

jQuery(document).ready(function(){
  jQuery("#tag").focus();
});

这是一个使用 Fancybox 作为 iframe 打开的窗口。这是我的 Fancybox 功能：

jQuery(".fancybox").fancybox({
    type: "iframe",
    width: 640,
    height: 320,
    afterClose : function() {
        location.reload();
        return;
    },
    afterShow: function() {
        jQuery('.fancybox-iframe').find('#tag').focus();
    }
});

有解决办法吗？

谢谢！

【问题讨论】：

tag 不作为 ID 存在...
getId() 在那里做什么 - 你能摆脱它吗？然后再试一次，你确定 jquery 文件包含在页面的顶部或底部等吗？
我更正了解释 ahren，我使用的是 ID。谢谢。
嘿，您似乎使用的是 fancybox v2.x 和 onComplete 这不是该版本的有效 API 选项...改用 afterShow
...另外（如果使用 v2.x）正确的选择器是 jQuery(".fancybox-iframe")

标签： jquery html firefox iframe fancybox

【解决方案1】：

试试这个。

 //change this selector:
$('yourselector').fancybox({
    onComplete: function() {
        $('#fancybox-frame').contents().find('#tag').focus();
    }
});

API reference

当您将内容加载到iframe 时，jQuery 将无法使用标准$(selector) 找到它的内容。 .contents() 和 .find() 方法会。

#fancybox-frame是fancyboxiframe的默认ID。加载内容时会触发 onComplete 回调。

经过一些测试，onComplete 处理程序似乎启动得太早了。使用超时是一个丑陋的解决方案，因此调整加载的页面应该是一个更好的选择：

<form method="post" action="tags">
    <input type="hidden" name="id" id="id" value="getId()" />
    <input type="text" name="tag" id="tag" />
    <input type="submit" value="Add" name="add" />
</form>
<script>
document.getElementById('tag').focus();
</script>

当它被加载到 iframe 中时，脚本将正常执行并按应有的方式聚焦输入元素。

【讨论】：

我猜我的选择器是“.fancybox”吧？这是调用 iframe 的函数。
是的，应该是这样。运气好了吗？我正在尝试制作一个小提琴，但如果您发布一些示例标记以及您如何称呼它会有所帮助。
@82din 我一直在试验onComplete 回调，它似乎有问题（触发得太早）。但是查看答案更新，它应该更干净（确保 Ctrl+F5/禁用缓存）。
我的朋友，听起来很疯狂，document.getElementById('tag').focus();至少在我的示例中，在 Firefox 上也不起作用。
你把它放在表单下面的脚本标签里了吗？我复制粘贴了您的代码，它在我的 Firefox 上运行。最后一种方法是将load 处理程序设置为#fancybox-frame，但这只是额外的hackish。

【解决方案2】：

你提到了不存在的 id "tag"

<form method="post" action="tags">
    <input type="hidden" name="id" value="getId()" />
    <input type="text" name="tag" id = "tag" autofocus="autofocus"/>
    <input type="submit" value="Add" name="add" />
</form>

【讨论】：

我做了 Jatin，几秒钟前我刚刚将它添加到表单中。

【解决方案3】：

我在回答中省略了 contents() 。在 Fancybox v2.x 中是这样的：

jQuery(".fancybox").fancybox({
type: "iframe",
width: 640,
height: 320,
afterClose : function() {
    location.reload();
    return;
},
afterShow: function() {
    jQuery('.fancybox-iframe').contents().find('#tag').focus()
}
});

感谢 JFK 和 Fabrício Matté。

【讨论】：