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

我在联系表单上使用Google Recaptcha。问题是，在移动设备上，当验证了Google Recaptcha时，它会将使用情况向下滚动到页面底部。然后，用户将不得不再次向上滚动以提交特定表单。

这仅在运行版本10或更高版本的ios设备上发生。

我无法解决此问题。

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

最佳答案

我设法找到解决此问题的方法。
首先，您应该知道提交响应后会有一个回调。我所做的就是使用它来集中我在此回调中需要的内容。但是焦点无法在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>

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

关于javascript - 在iOS设备上进行验证时，Google ReCaptcha滚动到页面底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41889296/