安卓--Webview，输入框为什么会出现双倍？

Question

我想创建一个Android应用程序，使用Webview允许用户输入用户名和密码，但在点击输入框时它们会变成两个（请参见下面的图片）。我正在使用iScroll jQuery插件，以便用户在键盘弹出并阻挡输入区域时可以向上滚动页面。这是布局/ CSS：

CSS:

#scroller{
    position:absolute;
    overflow:hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:0;

}
#scroll_content {
    margin-top: 70px;/*must match the topbar height*/
    padding-bottom:70px;
}

HTML：

...
<div id="scroller">
  <div id="scroll_content">
    <!-- page content here -->
  </div>
</div>
...

我注意到在Android平台上，无论我查看哪个网页，它都会在我刚刚点击的输入框上覆盖一个额外的输入框。我猜关键是要在这种情况下禁用webview的默认设置？你如何做到这一点，或者你能吗？

谢谢

- RyanM

---

一点也没有。我放弃了，转而使用本地语言。抱歉。 - RyanM

我也遇到了同样的问题，该死。添加那些translate3d CSS属性也没有帮助我。:( - laszlo-horvath

这个对我有用！https://dev59.com/UWox5IYBdhLWcg3wHAwA - Midhun KM

Answer 1

这可能与CSS过渡效果有关。电话似乎无法跟踪文本框的实际位置。基本上，它似乎在绝对定位和iscroll正在进行的translate3d()之间感到困惑。解决方法很简单，只需在div开始时设置translate3d(0,0,0)，以确保它知道自己在哪里。 请查看我的文章以获取更多详细信息： http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html 希望这有所帮助。

- Vivien

Answer 2

请在你的CSS中添加以下内容：

#your-container-div-id{
    -webkit-transform: translate3d(0,0,0);
}

- Anton