如何设置HTML INPUT标签的样式，以便在专注于Android 2.2+时保持CSS？

Question

我很高兴发现Android 2.2支持这个位置：固定的CSS选择器。我在这里建立了一个简单的证明概念：

http://kentbrewster.com/android-scroller/scroller.html

......这就像一个魅力。但是，当我尝试将INPUT标签添加到我的标题时，我遇到了麻烦。在焦点上，我到目前为止尝试的每个设备都克隆了INPUT标签，给它一个无限的Z-index，并在旧标签上重新绘制它。克隆位于大致正确的位置，但其父级的大多数CSS（当然包括位置：固定）将被忽略。克隆的INPUT标记的大小和形状错误，当我滚动页面的主体时，它会向上和向下滚动屏幕。

一旦屏幕关闭，就会出现欢闹声。有时设备会强制身体的滚动部分向下，这样克隆的空白就会回到视野中;有时键盘会消失，即使可见的盒子似乎仍然在焦点上;有时即使INPUT空白明显模糊，也无法解除键盘。以下是您可以在Android 2.2设备上运行以查看正在发生的事情的示例：

http://kentbrewster.com/android-input-style-bug/

样式输入：焦点还没有完成我的技巧，也没有很多不同的暴力尝试用JavaScript监听focus（）和blur（）并用焦点和键盘做正确的事情。

非常感谢你的帮助，

- 肯特

Answer 1

在Android切换到使用Chrome作为其WebView之前，这可能无法解决。当聚焦HTML输入字段时，当前的Android浏览器会在页面顶部创建一个Android TextView。显然他们没有正确地设计或定位它。您可以在使用contentEditable的网页上看到它出错。

目前的Chrome-for-Android实现了WebKit IME界面，因此输入字段由WebKit绘制（并且在ICS上丢失了一些Android TextView的细节），不应该有这样的问题。

Answer 2

解决方案是添加：

    input {
        -webkit-user-modify: read-write-plaintext-only;
        -webkit-tap-highlight-color: rgba(255,255,255,0);
    }

在你的CSS中。

Answer 3

您可以使用Android中的错误解决问题：http://code.google.com/p/android/issues/detail?id=14295。

也就是说，不要立即显示输入字段。相反，显示一个覆盖div，它侦听单击并隐藏自身并显示隐藏的输入，并给出输入焦点。这会以某种方式阻止Android使用放在所有内容之上的奇怪输入，而是使用浏览器输入字段，您可以按照自己想要的方式设置样式。

正如您在bug raport中所注意到的，这不适用于输入[type =“number”] ...