Question

我在联系表单上使用google recaptcha。问题是，在移动设备上，当验证google recaptcha时，它会将使用向下滚动到页面底部。然后，必须再次向上滚动以提交特定表格。

这仅适用于运行版本10或更高版本的ios设备。

我还没能解决这个问题。

您可以在此处查看问题https://www.digamberpradhan.com.np/contact-copy/

Answer 1

我设法找到了解决此问题的方法。首先，您应该知道在提交回复后会有回调。我所做的是使用它来集中我在此回调中所需的内容。但是焦点在iOS上无法正常工作，因此您必须使用另一种解决方法，即javascript动画文档：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>

特别是，在这种情况下，animate直接转到你想要的任何元素。只是这样对用户来说看起来不错，你应该选择一个你真正想要聚焦的元素。

Answer 2

这是我使用的解决方法，因为我发现这个问题发生在我管理的一个WordPress网站上。它与罗德里戈的相似之处在于它看起来使用onload回调;然而，而不是滚动到$（元素）offset（）。top，而是观察滚动事件：一旦reCAPTCHA容器滚动到视图中，我注意到窗口的pageYOffset而是滚动到那个而不是< / p>

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

这种方法可以更好地将reCAPTCHA集中在iOS设备的视口中

Google ReCaptcha在ios设备上验证后滚动到页面底部

2 个答案: