fancybox 대화 상자에서 포커스 설정

fancybox에있는 폼의 첫 번째 입력 요소에 포커스를 설정하는 데 문제가 있습니다. 나는 WordPress 3.5.2와 fancybox 2.1.3을 사내 플러그인을 통해로드하고있다.fancybox 대화 상자에서 포커스 설정

나는 라고 생각합니다. DOM에서 포커스를 올바르게 설정하는 경로를 이해할 수 없습니다.

"fancybox-hidden"으로 표시된 div 안에는 두 가지 형식이 있습니다. 각 양식은 고유 ID가있는 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와에 참조하는 ID의이 후 부하 내에서 호출

함수가 존재합니다. Firebug에서 중단 점을 설정하면 "jQuery ('a # show-login') fancybox가 표시됩니다 ("호출이 처리되고 'afterLoad'속성도 나타납니다.) 그러나 "jQuery (' #user_login ') (초점). "명중되지 않습니다

출처

2013-07-01 Mophilly

fancybox 2를 사용하고 있는지 여부는 'oncomplete'가 유효한 API 옵션이 아니기 때문에 확실합니다. 'afterShow'를 대신 사용해보십시오 (fancybox WP 플러그인을 사용하는 경우 v1.3.4 일 가능성이 큽니다) – JFK

감사합니다. JFK. 나는 버전을 확인하고 필요에 따라 첫 단락을 편집했다. – Mophilly

JFK의 관찰에 이어 'onComplete'대신 'afterLoad'를 사용하도록 코드를 수정했습니다. 이 변경으로 인해 콘솔에 오류가 발생하지는 않지만 .focus 호출시 설정된 중단 점은 절대 적중되지 않습니다. – Mophilly

다음은 fancybox 통화에 추가 그것은 모든 콘텐츠를합니다 (fancybox 그래서 인라인, 아약스 또는 HTML)

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

에서 작동해야합니다.. 전화 번호는 다음과 같습니다.

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

"your_element_class"를 HTML 요소의 클래스로 변경하십시오. fancybox를 부를 전화 번호. 또한 양식 필드에 적절한 tabindex가 있는지 확인하십시오.

출처

2017-03-02 23:12:46

fancybox 대화 상자에서 포커스 설정

답변

관련 문제