停用Android浏览器的输入叠加层？ [英] Disable Android browser's input overlays?

问题描述

我有一个包含一些文本输入的网页。 Android浏览器（至少在Android 2.3.4，这是我现在已经）似乎覆盖了自己的控制在页面上的输入焦点。

问题是重叠的控件是一个白色矩形，看起来很丑陋。

更新：

p>以下是来自Android模拟器的示例：

圆角和背景丢失。在实际的设备上，我甚至没有看到控件周围的边框。

我应该提到我使用jQuery Mobile。我的测试设备是HTC Evo 4G。

相关问题：

输入有不同的焦点风格

解决方案

最后，我为Android 2.3设备解决了这个问题。

这是不可能真正删除覆盖，但是可以移动覆盖以外的视口。 / p>

叠加层尝试将其自身定位到与输入字段相同的位置。
它复制您指定的宽度和位置偏移量

  position：relative 
  

和

  10000px 
  

但是覆盖不会复制通过

$ b $分配的位置偏移b

  -webkit-transform：translate3d（）
  

$ b b

这会导致像iScroll这样的JS库出现几个问题。

但这也有助于隐藏叠加层：

  input [type =password]，input [type =text] {
 position：relative; 
 top：-10000px; 
 -webkit-transform：translate3d（0，10000px，0）; 
} 
  

将输入字段放在视口外。覆盖位置在它旁边。

我们已经在我们的移动网络框架qooxdoo Mobile中使用了这个解决方案：
http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

I've got a web page with some text inputs. The Android browser (at least on Android 2.3.4 which is all I've got now) seems to overlay its own control over the input on the page on focus.

The problem is that the overlaid control is a white rectangle and it looks ugly. Is there a way to disable it, or style it somehow?

UPDATE:

Here is an example from the Android emulator:

The rounded corners and the background are lost. On the actual device, I don't even see a border around the control.

I should probably mention that I'm using jQuery Mobile. My test device is an HTC Evo 4G.

Related questions:

Input has different style on focus

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

解决方案

Finally, I solved this problem for Android 2.3 devices.

It is not possible to really remove the overlay, but it is possible to move the overlay outside the viewport.

The overlay tries to position itself to the same position as the input field. It copies the width and the position offset which you assign with

position:relative

and

top:-10000px

But the overlay does not copy the position offsets which are assigned through

-webkit-transform: translate3d()

This causes several issues with JS libraries like iScroll.

But this also helps us to hide the overlay:

input[type="password"], input[type="text"]{
  position:relative;
  top:-10000px;
  -webkit-transform: translate3d(0, 10000px, 0);
}

You place the input field outside the viewport. Overlay positions itself beside it. Now you use translate3d() for moving it to the old position.

We use this solution already in our mobile web framework "qooxdoo Mobile": http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

这篇关于停用Android浏览器的输入叠加层？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！