javascript - Google ReCaptcha 在 iOS 设备上验证时滚动到页面底部

Question

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

这只发生在运行版本 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>

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