页面总是自动聚焦在 textarea 上，然后 scrolltotop 不起作用答案

【问题标题】：Page always autofocus on textarea and scrolltotop is not working then页面总是自动聚焦在 textarea 上，然后 scrolltotop 不起作用
【发布时间】：2020-02-27 09:15:42
【问题描述】：

我有一个带有一些复选框项目的页面，然后在页面的最底部有一个textarea 元素。此textarea 已分配没有自动对焦。

<textarea id="comments" class="form-control" rows="8">@Comments</textarea>

textarea 在页面加载并滚动到底部时始终获得焦点。

它必须适用于 Android 和 iPhone webview 容器。

我已经尝试了很多在页面加载后滚动到顶部或从该元素中移除焦点但到目前为止没有运气。

我尝试了以下我在这里找到的不同技巧：

    $("html,body").animate({ scrollTop: 0 }, "slow");
    $(this).scrollTop(0);
    $('textarea').blur();
    $('#comments').blur();
    document.activeElement.blur();
    document.getElementById("origin").focus();
    $('html,body').animate({
                scrollTop: $("#origin").offset().top
                 });
    $("body").scrollTop(0);
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

即使按钮转到顶部点击不起作用

    $("#myBtn").on("click", function () {
        console.log('ddd');
        $(this).scrollTop(0);
        $("html").scrollTop(0);
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
    });

我还发现这可能是因为溢出：在主容器上滚动可能会阻止 scrolltotop 工作。所以这是 _Layout.chtml 页面中我的主要容器详细信息。

#mobile-content-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 80px;
    overflow-y: scroll;
    overflow-x: hidden;

我可以在这里借鉴您的一些经验。

【问题讨论】：

能不能展示一下你的html和js代码
@KamleshBhurke 我能够进行黑客攻击，并且适用于这种情况。无论如何，谢谢。

标签： javascript android jquery iphone scroll

【解决方案1】：

实际上我能够破解它。基本上我在页面加载时将 textarea 设为只读。所以它不会得到焦点。然后将其设置为超时后再次启用。这样，文本框将在用户开始向下滚动时启用。

setTimeout(function () { document.getElementById('cmets').readOnly = false }, 500);

【讨论】：

【解决方案2】：

android scrollTop 解决方法是：

document.body.style.overflow = 'hidden';
document.body.scrollTop = 0; 
document.body.style.overflow = 'scroll'; // or overflow-y and/or 'auto'

在某些旧版本的 android 浏览器上，如果溢出不是“隐藏”（这绝对是浏览器错误），设置 scrollTop 将被忽略。

也就是说，我没有在 body 元素上进行测试。该错误出现在任何带有溢出的 DOM 元素上，这是我发现解决方法的地方。不过，我已经很多年没有遇到过这个错误了，因为旧的 android 浏览器非常罕见，并且在我当前的项目中不受支持。

另外，尝试通过使用 scrollTop 来解决您的问题似乎是错误的。您应该首先尝试解决您的元素在启动时获得焦点并滚动窗口的原因。如果没有看到正在运行的网站存在此问题，我无法帮助您。如果您可以创建一个 jsfiddle 或类似的东西来重现该问题，我很乐意看看它。

【讨论】：