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

Question

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

<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();
    }
});

有解决办法吗？

谢谢!

Answer 1

试试这个。

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

API reference

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

#fancybox-frame 是 fancybox iframe 的默认 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 中时，脚本将正常执行并按应有的方式聚焦输入元素。