如何设置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()并用焦点和键盘做正确的事情.

非常感谢您的帮助,

--Kent

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.