如何防止野生滚动时固定位置的文本输入表单字段获得焦点？(How can I prevent wild

我有一个显示的位置中的对话框的移动网络应用：固定元件覆盖整个屏幕。无论页面已经有多少内容显示或者多远滚动，叠加元素变暗的页面内容和出现在这一切之上的对话框。有一个<input type="search />在对话框中字段。

在Android上，当用户点击输入字段，以获得焦点，一些非常奇怪的行为通常（但并不总是）随之而来：

软键盘出现，然后立即消失。
底层页面（通过覆盖覆盖）的几十个像素的画轴，有时可达，时而上下，时而在两个方向上，有时反复。当输入字段失去焦点也会发生这种情况。
所述覆盖元件暂时移动几个像素向下和向右，揭示沿着屏幕的顶部边缘和左边缘的底层内容。（它返回放置小于一秒钟后）。

这是在Android 2.3.4与内置的浏览器。它也可能出现在其他Android版本。

构建的页面是这样的：（请记住，有些怪癖的只显示了当页面包含足够的内容，允许滚动。）

<head>
  <style type="text/css">
    #menuoverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(0,0,0,.75);
    text-align: center;
    }
    #menu {
    display: inline-block;
    margin-top: 1em;
    border: 3px solid #02b;
    border-radius: 8px;
    padding: 1ex;
    background-color: black;
    color: silver;
    }
  </style>
</head>

<body>
  <div id="menuoverlay">
    <div id="menu">
      ...menu items...
      ...menu items...
      <form action=""><input type="search"/></form>
    </div>
  </div>

  <div id="content">
    ...lots of stuff...
    ...lots of stuff...
    ...lots of stuff...
  </div>
<body>

有其他人看到这种行为？你找到一种方法来预防呢？

网上淘使我类似的问题几个报告。下面是我到目前为止阅读的摘要：

在许多Android设备上，内置的浏览器显然不使用WebKit的输入栏人们所期望的方式。相反，当HTML定义的字段获得焦点时，浏览器会尝试用它单独创建新的文本控件覆盖它们。
这些重复的文本字段经常忽略CSS样式，创建其中字段看起来风格，直到他们获得焦点，然后突然恢复到系统默认样式的效果。
Android浏览器往往不能正确地放置这些重复的领域。如果放错了地方，他们有时可见，但其他时候只能将焦点移动目标没有任何视觉指示，他们已经感动。
这些问题常常显示当一个输入字段的父元素的样式等transform: translate3d() -webkit-backface-visibility ，或position: fixed 。

下面是一些相关链接：

Android浏览器的textarea滚动所有的地方，不可用

我怎样才能样式的HTML INPUT标记所以当专注于Android 2.2以上版本它维护CSS？

的Android 2.2 / 2.3的本地浏览器和固定定位

Answer 1:

我设法防止通过设置瞬间覆盖转变outline: none我的input元素。

我得到了野生页面滚动和消失的键盘设置落户overflow: hidden的HTML body显示对话框时，然后隐藏对话框时再取出。这有重置页面的滚动位置的讨厌的副作用，所以我将它保存，必要时进行恢复，并包裹这一切两轮牛车的条件语句，因此只能在Android上运行。（我希望我的Android用户将无法当他们看到的页面内容更改半透明的覆盖之下，而对话框打开太分心。）

有趣的是，我还能够通过捕捉，以防止野生页面滚动touchstart我的叠加元素上的事件并调用preventDefault（）方法。这使我怀疑这一切疯狂是由这样的一系列事件造成的：

touchstart冒泡到文档根
浏览器看到touchstart当重复输入字段放置
浏览器将焦点聚集到输入字段
软键盘出现，让打字输入字段
视口被调整大小以适应软键盘
触摸事件期间调整视口看起来像一个触摸拖动到浏览器
寄生阻力导致页面滚动并驳回键盘

我最终没有赶上touchstart来解决问题，因为它是从获得焦点，并呼吁防止输入字段focus()从JavaScript只是没有工作。我已阅读，Android浏览器禁用focus()输入字段，这可以解释这种行为的方法。也许正是这样做，因为它不会与它建立在HTML定义的字段重复的文字工具了。