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

当它被加载到iframe中时，脚本将正常执行并按原样聚焦输入元素。

Answer 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>

Answer 3

我在答案中省略了内容（）。在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ícioMatté。

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

3 个答案: