Google ReCaptcha ios 기기에서 확인한 페이지의 맨 아래로 스크롤

Question

문의 양식에 google recaptcha를 사용하고 있습니다. 문제는 모바일 장치에서 Google recaptcha가 확인되면 사용을 페이지의 맨 아래로 스크롤합니다. 그런 다음 사용을 다시 스크롤하여 특정 양식을 제출해야합니다.

이는 버전 10 이상을 실행하는 iOS 기기에서만 발생합니다.

이 문제를 해결할 수 없었습니다.

당신은 내가 관리 여기에 문제 https://www.digamberpradhan.com.np/contact-copy/

Answer 1

을 볼 수는이 문제에 대한 해결 방법을 발견했다. 먼저, 응답을 제출 한 후에 콜백이 있다는 것을 알아야합니다. 내가 한 것은이 콜백에서 필요한 것을 집중시키는 데 사용하는 것이 었습니다. 하지만 iOS에서는 포커스가 올바르게 작동하지 않으므로 자바 스크립트 애니메이션이 적용된 다른 해결 방법을 사용해야합니다.
문서 : 내 경우 https://developers.google.com/recaptcha/docs/display

, 그것은 다음과 같습니다

<script src="http://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> 
<div id="re-captcha" class="g-recaptcha" ></div> 

당신이 reCAPTCHA를로드 한 후 나는 onloadCallback 전화 했어 볼 수 있듯이. 또한 render = explicit을 지정하지 않으면 어떤 이유로 콜백이 발생하지 않습니다.

<script> 
    var focusWhatever = function (response) { 
     $("html, body").animate({ scrollTop: $("#whatever").offset().top }, "slow"); 
    }; 

    var onloadCallback = function() { 
     var widget = grecaptcha.render(document.getElementById("re-captcha"), { 
      'sitekey' : "yoursitekey", 
      'theme': "light", 
      'callback' : focusWhatever 
     }); 
    } 
</script> 

특히이 경우 애니메이션은 원하는 요소로 직접 이동합니다. 사용자가보기에 좋으므로 실제로 초점을 맞추고 싶은 요소 위에있는 요소를 선택해야합니다.

Answer 2

제가 관리하는 WordPress 웹 사이트 중 하나에서이 문제가 발생했기 때문에 이것은 제가 사용했던 해결 방법이었습니다. 그것은 onload 콜백을 사용하는 것으로 보이는 점에서 Rodrigo 's와 유사합니다. . 그러나 대신에() 오프셋 (offset) $ (요소)에 스크롤의 최고, 내가 대신 스크롤 이벤트를 본 다음 reCAPTCHA를 컨테이너가보기에 스크롤 일단, 나는 윈도우의 pageYOffset의 메모를 대신했다 그 대신에

<script type="text/javascript"> 
window.reCaptchaPos = false; 

function attachEvent(element, event, callbackFunction) { 
    if (element.addEventListener) { 
     element.addEventListener(event, callbackFunction, false); 
    } else if (element.attachEvent) { 
     element.attachEvent('on' + event, callbackFunction); 
    } 
}; 

function isScrolledIntoView(el) { 
    var theTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
    var elemTop = el.getBoundingClientRect().top; 
    var elemBottom = el.getBoundingClientRect().bottom; 

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 
    if(isVisible) { window.reCaptchaPos = theTop; } 
    return isVisible; 
} 

window.onscroll = function() { isScrolledIntoView(document.getElementById('reCaptcha_')); }; 

focusWhatever = function (response) { 
      if(window.reCaptchaPos) { $("html, body").scrollTop(window.reCaptchaPos); } 
    }; 
</script> 

로 스크롤

이 접근법은 iOS 기기의 뷰포트에서 reCAPTCHA의 수직 중심을 더 잘 맞 춥니 다.