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

Question

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

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

我无法解决这个问题.

你可以在这里看到问题https://www.digamberpradhan.com.np/contact-copy/

Answer 1

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

正如您所看到的，我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>

特别是，在这种情况下，动画会直接转到您想要的任何元素。为了让用户看起来不错，您应该选择一个位于您实际想要关注的元素上方的元素。