页面始终自动聚焦在textarea上，然后scrolltotop无法正常工作 [英] Page always autofocus on textarea and scrolltotop is not working then

问题描述

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

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

textarea 总是在页面加载和滚动到底部本身。

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

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

我尝试了以下不同的技巧：

  $（ 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; 
  

偶按钮转到顶部时单击不起作用

< pre class = lang-js prettyprint-override> $（＃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 {
位置：相对； 
宽度：100％； 
 padding-bottom：80px; 
溢出-y：滚动； 
溢出-x：隐藏; 
  

我可以在这里利用您的一些经验。

解决方案

android scrollTop解决方法是：

  document.body.style.overflow ='隐藏'; 
 document.body.scrollTop = 0; 
 document.body.style.overflow =‘scroll’； //或在某些较旧版本的android浏览器上溢出-y和/或'auto'
  

，如果溢出未隐藏（绝对是浏览器错误），则将设置scrollTop忽略。

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

此外，尝试修复您通过使用scrollTop发出的问题似乎不对。您应该尝试修复元素首先获得焦点并在启动时滚动窗口的原因。如果看不到有问题的网站，我将无法为您提供帮助。如果您可以创建一个再现问题的jsfiddle或等效文件，那么我很乐意对此进行研究。

I have a page with some checkboxes items and then a textarea element at very bottom of the page. This textarea has no autofocus assigned.

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

textarea always get focus when page loads and scroll to bottom itself.

It has to be working for Android and iPhone webview containers.

I have tried a lot to scroll to top after page loads or remove the focus from this element but no luck so far.

I have tried below different tricks I found here:

    $("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;

even button go to top click not working

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

I also found it could be because of overflow: scroll on main container which could preventing scrolltotop from working. so here is my main container details from _Layout.chtml page.

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

I could use some of your experience here.

解决方案

The android scrollTop workaround would be:

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

on some older versions of the android browser, setting scrollTop would be ignored if the overflow was not 'hidden' (which is definitely a browser bug).

That said, I didn't test that on the body element. The bug presents itself on any DOM element with overflow which is where I discovered the workaround. I haven't encountered this bug in many years though, as the older android browsers are pretty rare and aren't supported in my current projects.

Also, trying to fix your issue by the use of scrollTop seems wrong. You should try to fix the reason that your element is receiving focus and scrolling your window on launch in the first place. I can't help you with that without seeing a running website with the issue. If you could create a jsfiddle or equivalent that reproduces the issue I'm happy to take a look at it.

这篇关于页面始终自动聚焦在textarea上，然后scrolltotop无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！