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

问题描述

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

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?

更新：

下面是一个例子从Android模拟器：

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.

我也许应该提到，我使用jQuery Mobile的。我的测试设备是HTC EVO 4G。

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

相关问题：

输入有不同的风格焦点

投入要素WebViews总是有相同的风格，如果突出了HTC设备

推荐答案

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

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

和

top:-10000px

但覆盖不复制它们通过

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

-webkit-transform: translate3d()

这会导致一些问题的JS库，比如iScroll。

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);
}

您将输入字段中的视区之外。覆盖将自己定位在它旁边。现在，您使用translate3d（），它移动到老位置。

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

我们已经使用该解决方案在我们的移动Web框架qooxdoo手机： <一href="http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform">http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

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

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