在fancybox對話框中設置焦點

我在設置專注於fancybox中表單的第一個輸入元素時遇到問題。我正在使用WordPress 3.5.2和fancybox 2.1.3通過內部插件加載。在fancybox對話框中設置焦點

我認爲我不明白DOM中的路徑來正確設置焦點。

裏面的div標記爲「fancybox-hidden」是兩種形式。每個表單都在一個帶有唯一標識的div內。通過單擊錨點打開表單。每個錨點擊都會在適當的對話框中顯示。是

打開對話框中的錨如下：

<a href="#login-form" class="fancybox" id="show-logon">Sign On To Your Account</a><br> 
<a href="#register-form" class="fancybox" id="show-register">Create A New Account</a>

下面是在頁面底部的js代碼：

<script type="text/javascript">// <![CDATA[ 
jQuery(document).ready(function(){ 

    jQuery('a#show-login').fancybox({ 
     'afterLoad' : function(){ 
      jQuery('#user_login').focus(); 
     } 
    }); 

    jQuery('a#show-register').fancybox({ 
     'afterLoad' : function(){ 
      jQuery('#user_name').focus(); 
     } 
    }); 
    // ]]</script>

在jQuery的引用編號的後負荷中調用函數確實存在。在Firebug中設置斷點會顯示「jQuery（'a＃show-login'）。fancybox（」call is processed and the attribute'afterLoad'）。但是，在jQuery（' #user_login'）專注（）;」永遠不會打

來源

2013-07-01 Mophilly

好吧，你必須確定你是否使用fancybox 2，因爲'onComplete'不是一個有效的API選項。嘗試使用'afterShow'代替（如果您使用的是fancybox WP插件，最有可能是v1.3.4） – JFK

謝謝，JFK。我確實驗證了版本並根據需要編輯了第一段。 – Mophilly

繼JFK的觀察後，我修改了代碼以使用'afterLoad'而不是'onComplete'。此更改不會在控制檯中引發錯誤，但在.focus調用中設置的斷點不會被命中。 – Mophilly

下，應加入的fancybox調用它的工作原理上的所有內容（聯機，AJAX或HTML）

afterShow: function() { 
    $(this.content).attr("tabindex",1).focus() 
}

所以的fancybox。電話應該看起來像。

$(".your_element_class").fancybox({ 
    afterShow: function() { 
     $(this.content).attr("tabindex",1).focus() 
    } 
});

請將「your_element_class」更改爲您的html eleme的類nt你正在呼叫fancybox。還要確保你的表單域中有正確的tabindex

來源

2017-03-02 23:12:46

在fancybox對話框中設置焦點

回答

相關問題