Android - Webview，输入框加倍？ [英] Android--Webview, Input boxes doubled?

问题描述

我正在尝试创建一个Android应用，该应用使用一个webview来允许用户输入他们的用户名/密码，但是在点击输入框时他们会翻倍（见下图）。我使用iScroll jQuery插件，允许用户滚动页面向上，当键盘出来并阻止输入区域。这里是layout / css：

CSS：

  #scroller {
 position：absolute; 
 overflow：hidden; 
 top：0; 
 bottom：0; 
 left：0; 
 right：0; 
 z-index：0; 
 
} 
 #scroll_content {
 margin-top：70px; / *必须匹配topbar height * / 
 padding-bottom：70px; 
} 
  

html：

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

我注意到，无论我在Android平台上查看什么网页，它覆盖了一个额外的输入框，我刚刚点击的输入。关键，我想，将禁用webview的默认在这种情况下？

/i.stack.imgur.com/fIvV9.pngalt =Doubled Input>

解决方案

链接到CSS转换。手机似乎失去了对文本字段的真实位置的跟踪。基本上，它似乎混淆了绝对定位和translate3d（）iscroll是做。一个简单的方法来修复它是设置translate3d（0,0,0）在开始的div，以确保它知道它在哪里。
有关详细信息，请参阅我的文章：
http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html
希望有所帮助。

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:

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

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?

Thanks

解决方案

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 - Webview，输入框加倍？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！