禁用 Android 浏览器的输入覆盖?

2024-01-30

我有一个带有一些文本输入的网页。 Android 浏览器(至少在 Android 2.3.4 上,这是我现在所拥有的)似乎将其自己的控制覆盖在焦点页面上的输入上。

问题是覆盖的控件是一个白色的矩形,看起来很丑。有没有办法禁用它,或者以某种方式设置它的样式?

UPDATE:

以下是 Android 模拟器的示例:

圆角和背景都丢失了。在实际设备上,我什至看不到控件周围的边框。

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

相关问题:

输入在焦点上有不同的样式 https://stackoverflow.com/q/5681013/221619

如果在 HTC 设备上突出显示,WebView 中的输入元素始终具有相同的样式 https://stackoverflow.com/q/5170028/221619


最后,我在Android 2.3设备上解决了这个问题。

不可能真正删除覆盖层,但可以将覆盖层移到视口之外。

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

position:relative

and

top:-10000px

但是覆盖不会复制通过分配的位置偏移

-webkit-transform: translate3d()

这会导致 iScroll 等 JS 库出现一些问题。

但这也有助于我们隐藏覆盖层:

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

您将输入字段放置在视口之外。 Overlay 将自身定位在它旁边。现在您使用translate3d() 将其移动到旧位置。

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

禁用 Android 浏览器的输入覆盖? 的相关文章

随机推荐