时间戳

首页 > 解决方案 > 页面总是自动聚焦在 textarea 上，然后 scrolltotop 不起作用

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

问题描述

我有一个带有一些复选框项目的页面，然后是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;

我可以在这里使用你的一些经验。

标签： javascriptandroidjqueryiphonescroll

解决方案

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

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

推荐阅读