Focus or Autofocus in Input Text doesn't work in Firefox 16.0.2

I want to focus on a input text after page loads/starts. This is my form:

我希望在页面加载/启动后关注输入文本。这是我的表格:

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

I tried jQuery but it doesn't work on Firefox:

我尝试过jQuery但它在Firefox上不起作用:

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

This is a window that opens as Iframe using Fancybox. This is my Fancybox function:

这是一个使用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();
    }
});

Is there a workaround for this?

这有解决方法吗?

Thank you!

3 个解决方案

#1

Try this.

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

API reference

As you're loading the content into an iframe, jQuery will not find its contents with the standard $(selector). .contents() and the .find() method will though.

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

#fancybox-frame is the default ID of the fancybox iframe. The onComplete callback fires when the content is loaded.

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

After some testing, it seems that the onComplete handler fires too earlier. Using a timeout is an ugly solution, so adapting your loaded page should be a better option:

经过一些测试,似乎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>

As it is loaded into an iframe, the script will be executed normally and focus the input element as it should.

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

#2

you have mentioned id "tag" which doesn't exist

你提到了不存在的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>

#3

I omitted contents() in my answer. In Fancybox v2.x it would be something like:

我在答案中省略了内容()。在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()
}
});

Thank you JFK and Fabrício Matté.

谢谢JFK和FabrícioMatté。

#1