Android不正确,如果没有主体元素滚动输入焦点如果没有、不正确、主体、元素

2023-09-07 08:39:11 作者:游吟诗人

在移动浏览器带来了一个它试图移动滚动条,使输入仍是鉴于键盘。

When a mobile browser brings up a keyboard it tries to move the scrollbars so that the input is still in view.

在iOS的Safari浏览器似乎通过查找在最近的滚动父母都是这么做的。

On iOS Safari it seems to do this properly by finding the nearest scrolling parent.

在Android原生或Chrome移动浏览器似乎只是尝试body元素,然后放弃,所以重点投入是隐藏在键盘下方。

On Android native or Chrome mobile browser it seems to just try the body element and then gives up, so the focused input is hidden beneath the keyboard.

设置溢出-Y:隐藏 body元素的。创建一个可滚动的容器,并把表格在里面。

Set overflow-y: hidden on the body element. Create a scrollable container and put a form in there.

当您选择屏幕底部附近的一个元素,它将通过键盘进行遮挡。

When you select an element near the bottom of your screen it will be obscured by the keyboard.

http://dominictobias.com/android-scroll-bug/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Android scroll/focus bug</title>
    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    .scroll {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: scroll;
    }
    input {
        margin-bottom: 20px;
        width: 100%;
    }
    </style>
</head>
<body>

    <div class="scroll">
        <input type="text" value="Input 1">
        <input type="text" value="Input 2">
        <input type="text" value="Input 3">
        <input type="text" value="Input 4">
        <input type="text" value="Input 5">
        <input type="text" value="Input 6">
        <input type="text" value="Input 7">
        <input type="text" value="Input 8">
        <input type="text" value="Input 9">
        <input type="text" value="Input 10">
        <input type="text" value="Input 11">
        <input type="text" value="Input 12">
        <input type="text" value="Input 13">
        <input type="text" value="Input 14">
        <input type="text" value="Input 15">
        <input type="text" value="Input 16">
        <input type="text" value="Input 17">
        <input type="text" value="Input 18">
        <input type="text" value="Input 19">
        <input type="text" value="Input 20">
    </div>

</body>
</html>

任何想法如何解决这一问题?它会需要一些浏览器检测和凌乱的黑客?

Any ideas how to fix this? Will it require some browser detection and messy hacks?

推荐答案

这是在Android原生浏览器的错误。顺便说一句,输入滚动到一个字符后的视图类型的软键盘上的。

This is a bug in the Android native browser. By the way, the input scrolls into the view after a character is typed on the soft keyboard.

下面code片段在页面的某个地方放置应帮助:

The following code snippet placed somewhere in the page should help:

if(/Android 4\.[0-3]/.test(navigator.appVersion)){
   window.addEventListener("resize", function(){
      if(document.activeElement.tagName=="INPUT"){
         window.setTimeout(function(){
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}