在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參考

當您將內容加載到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中后，該腳本將正常執行，並根據需要對輸入元素進行聚焦。

Answer 2

您提到的ID“標簽”不存在

<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

我在回答中省略了content（）。 在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()
}
});

謝謝肯尼迪國際機場和FabrícioMatté。