禁用 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.

相关问题:

输入有不同的焦点风格

如果在 HTC 设备上突出显示，WebViews 中的输入元素始终具有相同的样式

推荐答案

最后，我为 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()

这会导致 iScroll 等 JS 库出现多个问题.

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.

我们已经在我们的移动网络框架qooxdoo Mobile"中使用了这个解决方案: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屋！