Android的 - web视图，输入框翻倍？ [英] Android--Webview, Input boxes doubled?

问题描述

我想创建一个Android应用程序，使用一个web视图，允许用户输入自己的用户名/密码，但窃听的输入框，他们得到加倍（见下图）。我使用的是iScroll jQuery插件，允许用户滚动页面起来的时候键盘出现并阻止输入区域。这里是布局/ CSS：

I'm trying to create an Android app that uses a webview to allow users to enter their username/password, but on tapping the input boxes they get doubled (see the picture below). I'm using the iScroll jQuery plugin to allow users to scroll the page up when the keyboard comes up and blocks the input area. Here is the layout/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：

html:

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

我也注意到，无论我认为在Android平台上什么网页，它覆盖在输入我只是挖一个额外的输入框。关键，我想，将是禁用的WebView的默认在这种情况下？你怎么做到这一点，还是可以的，你甚至？

I do notice that no matter what webpage I view on the Android platform, it overlays an extra input box over the input I just tapped. The key, I guess, would be to disable the webview's default in this case? How do you do that, or can you even?

感谢

推荐答案

这是有可能被链接到CSS过渡。这款手机似乎失去了跟踪文本框的实际位置。基本上，它似乎是绝对定位和translate3d（），该iscroll做之间混淆。一个简单的方法来解决它是设置translate3d（0,0,0）在启动你的股利，以确保它知道它在哪里。 看看我的更多细节的文章： <一href="http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html">http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html 希望有所帮助。

This is likely to be linked to CSS transitions. The phone seems to lose track of the real position of the textfield. Basically, it seems to be confused between the absolute positioning and the translate3d() that iscroll is doing. An easy way to fix it is to set translate3d(0,0,0) at start on your div to make sure it knows where it is. Have a look at my article for more details: http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html hope that helps.

这篇关于Android的 - web视图，输入框翻倍？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！